WP+Woocommerce – edit widget featured products
Default view woocommerce widget - "featured products":
Change interface - replace price and add new parameters (quantity stock, short description). Standart and new:
Widget “featured products” show goods, which selected symbol “stars” in adminpanel:
Our change will work after update system if create new template "content-widget-product" in current theme. File -
wp-content/plugins/woocommerce/templates/content-widget-product.php
copy to -
wp-content/themes/YOUR-THEME/woocommerce/content-widget-product.php
Default code "content-widget-product.php " for Woocommerce 3.0.3:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<?php /** * The template for displaying product widget entries * * This template can be overridden by copying it to yourtheme/woocommerce/content-widget-product.php. * * HOWEVER, on occasion WooCommerce will need to update template files and you * (the theme developer) will need to copy the new files to your theme to * maintain compatibility. We try to do this as little as possible, but it does * happen. When this occurs the version of the template file will be bumped and * the readme will list any important changes. * * @see https://docs.woocommerce.com/document/template-structure/ * @author WooThemes * @package WooCommerce/Templates * @version 2.5.0 */ // Exit if accessed directly if ( ! defined( 'ABSPATH' ) ) { exit; } global $product; ?> <li> <a href="<?php echo esc_url( $product->get_permalink() ); ?>"> <?php echo $product->get_image(); ?> <span class="product-title"><?php echo $product->get_name(); ?></span> </a> <?php if ( ! empty( $show_rating ) ) : ?> <?php echo wc_get_rating_html( $product->get_average_rating() ); ?> <?php endif; ?> <?php echo $product->get_price_html(); ?> </li> |
Here use next parameters:
- $product->get_name() - product name;
- $product->get_permalink() - prepare product link;
- $product->get_image() - image code block 'img';
- $product->get_average_rating() - html block ratings;
- $product->get_price_html() - html block price.
Parameters for new template:
- $product->get_price() - price product;
- $product->get_short_description() - short description product;
- $product->get_description() - full description product;
- $product->get_date_created() - date create product;
- $product->get_stock_quantity() - quantity products in stock.
Bootstrap snippets for Woocommerce widget featured goods:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<?php if (!defined('ABSPATH')) { exit; } global $product; ?> <li class="container-fluid "> <div class="row"> <div class="col-xs-4"> <a href="<?php echo esc_url($product->get_permalink()); ?>"> <figure> <?php echo $product->get_image(); ?> </figure> </a> </div> <div class="col-xs-8 b_widget_product-data"> <h5> <a href="<?php echo esc_url($product->get_permalink()); ?>"> <?php echo $product->get_title(); ?> </a> </h5> <div> <div> <?php echo $product->short_description; ?> </div> <div class="b_widget_product-attribute"> <div class="pull-left"> <span class="glyphicon glyphicon-lock"></span> <span><?php echo $product->stock_quantity ?></span> </div> <div class="pull-right"> <span> от <?php echo $product->price ?></span> <span class="glyphicon glyphicon-rub"></span> </div> </div> </div> <div class="clearfix"></div> <div class="text-center"> <a href="<?php echo esc_url($product->get_permalink()); ?>"> <div class="btn btn-default btn-sm">Заказать</div> </a> </div> </div> </div> </li> |
Style for colorized attributes and remove padding:
|
1 2 3 4 5 6 7 |
.b_widget_product-data { padding-left: 0; } .b_widget_product-attribute { color: #3ab67f; font-weight: bold; } |
(5 votes, average: 9.40 out of 10)
Loading...
