Change shop archive layout

Hi 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.

Hi Dave,

Yes sure, I already creates a staging page for that. I now removed all custom CSS. Is this now better?

Hi 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 the woo-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.

Hello 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 :)

– 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. :)

Hello 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. :)

To 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

Hello 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?

STEP: 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.

Hello 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>';
}

Those 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;
}

Hello 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

I 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

Hello 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;
}