[Support request] Change shop archive layout

Home Forums Support [Support request] Change shop archive layout

Home Forums Support Change shop archive layout

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #2014545
    nik9

    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?

    #2014943
    David
    Staff
    Customer Support

    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.

    #2014960
    nik9

    Hi Dave,

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

    #2016644
    Elvin
    Staff
    Customer Support

    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.

    #2017013
    nik9

    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 πŸ™‚

    #2018774
    Elvin
    Staff
    Customer 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. πŸ™‚

    #2019397
    nik9

    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. πŸ™‚

    #2019463
    David
    Staff
    Customer Support

    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

    #2019679
    nik9

    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?

    #2019954
    David
    Staff
    Customer Support

    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.

    #2020206
    nik9

    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>';
    }
    
    #2020222
    David
    Staff
    Customer Support

    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;
    }
    #2020347
    nik9

    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

    #2021158
    David
    Staff
    Customer Support

    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

    #2021185
    nik9

    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;
    }
Viewing 15 posts - 1 through 15 (of 20 total)
  • You must be logged in to reply to this topic.