- This topic has 19 replies, 3 voices, and was last updated 2 years, 4 months ago by David.
-
AuthorPosts
-
November 22, 2021 at 7:23 am #2014545nik9
Hello,
We want adjust the niche shop archive look. For that we we had inspiration from that page here https://www.drinks.ch/de/gin.html
So we want to have a button to add to cart with a icon and also the ratings under the price. Also the Button for add to cart should be on the same line as the price and stars.
How can we do this with GP?
November 22, 2021 at 8:50 am #2014943DavidStaffCustomer SupportHi there,
your site has gone through a lot of customizations since the original Niche theme was imported.
To modify it to match the example site would require removing a lot of that customization.If you can do that on a staging site then we can advise on how to make some of those changes.
November 22, 2021 at 8:58 am #2014960nik9Hi Dave,
Yes sure, I already creates a staging page for that. I now removed all custom CSS. Is this now better?
November 22, 2021 at 7:33 pm #2016644ElvinStaffCustomer SupportHi there,
If you’re trying to replicate the reference site faithfully, we can start by removing the things added to niche by default.
On Appearance > Elements, you may have to delete the things added on generate_before_content and generate_before_main_content like the rankmath breadcrumbs, the
infotextfororder
element and thewoo-cat-nav
product navigation.You may want to keep add to cart button displayed for the buttons as well to replace the “add to cart” text with an icon. For this, you may have to refer to WooCommerce’s hooks documentation.
The rest is mostly customizer changes like the fonts (Appearance > Typography) with some of them requiring custom CSS, i.e. thickness of checkbox border, secondary nav top and bottom border, etc.
November 23, 2021 at 1:03 am #2017013nik9Hello Elvin,
Actually I currently only want to bild the product card stylings like this here: https://ibb.co/MC1N11r
All other stuff on the page is currently not important.
– The Add to cart icon should only appear on archive page NOT on product single page. There we want to have the normal text.
– How can we insert the star rating under the product price and add the icon on the right and full space same line as price and star ratings?If we have that.. then I think we almost done.
Cheers π
November 23, 2021 at 5:05 pm #2018774ElvinStaffCustomer Supportβ The Add to cart icon should only appear on archive page NOT on product single page. There we want to have the normal text.
β How can we insert the star rating under the product price and add the icon on the right and full space same line as price and star ratings?Can you share what code you currently use to add the star rating? We can modify it to add the icon and then do the layout with CSS.
We can also modify the code to add condition so it only gets added on product archive pages. π
November 24, 2021 at 4:27 am #2019397nik9Hello Elcinm
I do not use any special code for that. This is a setting in the customizer “display rating”. I think this is coming from GP. π
November 24, 2021 at 5:17 am #2019463DavidStaffCustomer SupportTo move the star rating below the price then you should simply be able to unhook it and hook it in after the price:
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5 ); add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 15 );
For reference this guide shows the hooks and what is hooked in where:
https://www.businessbloomer.com/woocommerce-visual-hook-guide-archiveshopcat-page/
The changing of the Add to Cart to an Icon is not so simple – as their is only a text filter for the cart button.
So aside from modifying the woo plugin files you can use the method provided here:https://gist.github.com/vagelisp/dabd609a79ae5bad8f6ba75f9a702e07
November 24, 2021 at 7:22 am #2019679nik9Hello David,
Cool Thanks! Changes are applied.
How can I now bring the add to cart icon in the same row as star rating and price? I think I have to add some custom flex box maybe and then hook the price and star rating in the left and the add to cart icon in the right. is that possible somehow?
November 24, 2021 at 8:00 am #2019954DavidStaffCustomer SupportSTEP: 1
Add the following PHP Snippet to create your HTML for a flex row:
add_action( 'woocommerce_after_shop_loop_item_title', function(){ // Open wrapper and for price review add2cart row // inner wrap for just price and review echo '<div class="price-cart-row"><div class="price-review-block">'; }, 9 ); add_action( 'woocommerce_after_shop_loop_item_title', function(){ // close wrap for price and review echo '</div>'; }, 16 );
STEP 2:
You ALREADY have these functions on your site
https://generatepress.com/forums/topic/change-niche-product-listing-to-boxes/#post-1560055
The last function needs changing from:
function woo_shop_loop_item_close_wrapper() { echo '</div>'; }
to:
function woo_shop_loop_item_close_wrapper() { echo '</div></div>'; }
If that works correctly then you have
div.price-cart-row
to add your flexbox too.November 24, 2021 at 10:05 am #2020206nik9Hello David,
Thanks. This is now my current setting.. but I font see any row there now. Do I have to hook that row now in? Didn’t get that.. π
//add the icon {CSS} a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart:after { content: "\f07a"; font-family: 'FontAwesome'; font-size: 15px; padding: 7px 12px 7px 12px; color: white; background: #333; border-radius: 5px }
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5 ); add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 15 ); //remove the text {PHP} add_filter( 'woocommerce_product_add_to_cart_text', 'change_text_woo' ); function change_text_woo() { return; } add_action( 'woocommerce_after_shop_loop_item_title', function(){ // Open wrapper and for price review add2cart row // inner wrap for just price and review echo '<div class="price-cart-row"><div class="price-review-block">'; }, 9 ); add_action( 'woocommerce_after_shop_loop_item_title', function(){ // close wrap for price and review echo '</div>'; }, 16 ); add_action('woocommerce_shop_loop_item_title', 'woo_shop_loop_item_open_wrapper',9); add_action('woocommerce_after_shop_loop_item', 'woo_shop_loop_item_close_wrapper',100); function woo_shop_loop_item_open_wrapper() { echo '<div class="woo-content-wrap">'; } function woo_shop_loop_item_close_wrapper() { echo '</div></div>'; }
November 24, 2021 at 10:14 am #2020222DavidStaffCustomer SupportThose functions added the HTML. You just need some CSS:
/* make it a row */ .price-cart-row { display: flex; } /* add some space between pricereview and add2cart */ .price-review-block { margin-right: auto; }
November 24, 2021 at 11:48 am #2020347nik9Hello David,
this is awesome!
I have some questions left:
– How can I make sure that WooCommerce also display stars (empty star) when no review is available for a product? WoocCommerce standard only display the rating when a product has at least one review. We want to display empty stars when no review is currently available.
– How can we gray out the add to cart button/icon now, if a product is sold out? Surrently on a sold out product is no button/icon visible
November 25, 2021 at 4:14 am #2021158DavidStaffCustomer SupportI can see review stars on all products – did you resolve that ?
To add an icon to the sold out ‘cart’ button you can use this CSS selector:
.outofstock .price-cart-row a.button:before
November 25, 2021 at 4:34 am #2021185nik9Hello Davde,
Thanks & Yes, I was able to resolve that issue with that snipped here:
add_filter('woocommerce_product_get_rating_html', 'always_show_rating', 25, 3); function always_show_rating( $html, $rating, $count ) { $label = sprintf( __( 'Rated %s out of 5', 'woocommerce' ), $rating ); $html = '<div class="star-rating" role="img" aria-label="' . esc_attr( $label ) . '">' . wc_get_star_rating_html( $rating, $count ) . '</div>'; return $html; }
-
AuthorPosts
- You must be logged in to reply to this topic.