I would like to add a class to the existing woocommerce product widget.
The file '/includes/widgets/class-wc-widget-products.php' has the following filter.
echo apply_filters( 'woocommerce_before_widget_product_list', '<ul class="product_list_widget">' );
Is there a method that I can edit the html <ul class="product_list_widget"> in that filter within my theme?
this seems to be straight. Add the following in your functions.php
add_filter( "woocommerce_before_widget_product_list", "edit_product_widget_list", 1, 1 );
//$old_html contains -> <ul class="product_list_widget">
function edit_product_widget_list ( $old_html ) {
return '<ul class="my_own_class_here">'; // change your class here
}
Good luck :)
Related
I want to apply css on the rows in a specific page, but all the pages have the same row-classes.
So I taught its better to add a specific class to the page and then apply the css on it.
I use ACF and I don't know how to add class to this page.
I tried different codes into function.php with no luck.
Exp:
function be_portfolio_archive_body_class( $classes ) {
$classes[] = 'sortiment';
return $classes;
}
add_filter( 'body_class', 'be_portfolio_archive_body_class' );
I am trying to add a class to <div class="star-rating"> located in content-widget-reviews.php ( in woocommerce template )
displayed here:
<?php echo wc_get_rating_html( intval( get_comment_meta( $comment->comment_ID, 'rating', true ) ) ); ?>
I want to make my template work with Bootstrap 4 ( see caps below )
float right needs to be removed vs.
wanted result
I tried this solution below, but it adds the classes on the whole template ( I just want to add this class to the widget area)
// Widget review Stars
function myfuntion_wc_get_rating_html($html) {
// Replace link classes
$html = str_replace('<div class="star-rating"', '<div class="star-rating float-none text-primary"', $html);
return $html;
}
add_filter("woocommerce_product_get_rating_html", "myfuntion_wc_get_rating_html")
;
Is there a way to add my custom class directly on this code ?
<?php echo wc_get_rating_html( intval( get_comment_meta( $comment->comment_ID, 'rating', true ) ) ); ?>
Thanks
P.S. I'd like to avoid the use of Jquery and CSS
Did you try replacing WooCommerce template in your theme like described here https://docs.woocommerce.com/document/template-structure/ ?
Edit files in an upgrade-safe way using overrides. Copy the template
into a directory within your theme named /woocommerce keeping the same
file structure but removing the /templates/ subdirectory.
I'm using Woocommerce and Storefront to build a custom site and I'm desperately searching to add a class to to the list items of the shop (archive) page. My shop catalog displays category items.
I could find the unordered list, the a tag... but impossible to find the list items.
Does somebody know where to find it, or how to add a class to it?
The shop archive url is : localhost/thesite/shop (but not the product category archive pages localhost/thesite/product-category/catname)
<ul class="product columns-3">
<li class="product-category product first">
</li>
<li class="product-category product"></li>
<li class="product-category product"></li>
</ul>
For categories on shop page (when you are "showing categories" on product catalog), you will use the following hook (here we add an additional class custom_cat):
add_filter( 'product_cat_class', 'filter_product_cat_class', 10, 3 );
function filter_product_cat_class( $classes, $class, $category ){
// Only on shop page
if( is_shop() )
$classes[] = 'custom_cat';
return $classes;
}
Code goes in function.php file of your active child theme (or active theme). Tested and works.
Note: The related template involved is content-product_cat.php
Optionally if needed when both categories and products are displayed on shop page.
For products on shop page you will use the following hook (here we add an additional class custom_prod):
add_filter( 'post_class', 'filter_product_post_class', 10, 3 );
function filter_product_post_class( $classes, $class, $product_id ){
// Only on shop page
if( is_shop() )
$classes[] = 'custom_prod';
return $classes;
}
Code goes in function.php file of your active child theme (or active theme). Tested and works.
Note: The related template involved is content-product.php
You can use jQuery solution to add class to any of your list items. Please, check this Pen, hope it helps.
HTML
<ul class="product columns-3">
<li class="product-category product first">
</li>
<li class="product-category product"></li>
<li class="product-category product"></li>
</ul>
CSS
.second {color: red;}
.common {list-style-type: circle;}
JS
jQuery(document).ready(function() {
$('li.product:nth-child(2)').addClass('second');
$('li.product').addClass('common');
})
I am using WordPress 4.9.6.
I have set the shop page to be the home-page.
How do I add a page banner to the shop page. I would like to add it just above the breadcrumb trail.
I have tried adding this to the following page archive-product.php
if (is_shop()) {
$args = array('taxonomy' => 'product_cat');
$product_categories = get_categories( $args );
$term_id = $product_categories[0]->term_id;
$content = get_term_meta($term_id, 'cat_meta');
if(isset($content[0]['cat_header'])){
echo do_shortcode($content[0]['cat_header']);
}
}
Unfortunately, not able to add any image to the page.
You can achieve using 2 methods.
1) Add your static image directly at the beginning of archive-product.php
echo "<img src='{YOUR_IMAGE_PATH}'>";
2) Add filter in your theme's functions.php file.
add_action ('woocommerce_archive_description' , 'shop_banner',99);
function shop_banner() {
echo '<img src="{YOUR_IMAGE_PATH}" >';
}
I'm not so sure if I understand exactly what you want. But this is what I understand so far.
If you want to display an Static image banner above the breadcrumbs in your Shop Page.
You could use the woocommerce_before_main_content action.
function BannerShop(){
if(is_shop()){
echo '<img src="https://localhost/demosite/wp-content/uploads/2015/06/512x356.png" >';
}
}
add_action( 'woocommerce_before_main_content', 'BannerShop', 10 );
Here i show the before and after. BTW I don't know what theme are you using so it may be displayed different.
Before
https://i.stack.imgur.com/Mv2YK.jpg
After https://i.stack.imgur.com/nTfCa.jpg
I am trying to add content after the page title and customize the style of page where all products are listed in woocommerce, but I have no idea where is the file that I can copy to my custom theme, I have been able to customize the products in the loop but don't know where to customize this?
On inspect element it is the h1 element with a class page-title:
<h1 class="page-title">Nettbutikk</h1>
woocommerce/templates/single-product/title.php is the file you are looking for. You can copy single-product/title.php to yourchildthemefolder/woocommerce/single-product/title.php
Here is a link to their github of that file so you can see it for yourself. Let me know if this helped! :)
https://github.com/woocommerce/woocommerce/blob/master/templates/single-product/title.php
To edit the woocommerce product list page, the file woocommerce/archive-product.php needs to be edited.
Woocommerce Listing products page add content after product title using given hook.
add_action( 'woocommerce_after_shop_loop_item_title', 'after_shop_loop_item_title', 1 );
Add this code in functions.php of current active theme.
add_action( 'woocommerce_after_shop_loop_item_title', 'after_shop_loop_item_title', 1 );
function after_shop_loop_item_title() {
global $post;
$terms = get_the_terms( $post->ID, 'product_cat' );
$text = "<p> (";
foreach ($terms as $term) {
$text .= $term->name;
}
$text .= ") </p>";
echo $text;
}
Reference by: https://businessbloomer.com/woocommerce-visual-hook-guide-archiveshopcat-page/