Need to customize Shop page - by Tony - on WordPress WooCommerce support

This topic has 16 replies, 4 voices, and was last updated 6 years, 7 months ago ago by Rose Tyler

  • Avatar: Tony
    Tony
    Participant
    April 25, 2019 at 17:37

    Hi – I’d like to style my current shop page:
    http://www.healthykidsmattress.com/shop-2/

    to look a little more like this:
    https://www.brentwoodhome.com/collections/mattresses

    I’m wondering what I can customize within the template (and not have to do too much CSS stylizing). If you can let me know how to do each of these, I would greatly appreciate it! Thank you in advance!!

    Also – I’m not able to change the text-transform from uppercase to capitalize (upper/lowercase). I tried here: https://puu.sh/DjLHP/751bc56301.png

    • Remove Category on every product
    • Add large heading at the top “Mattress Collection”
    • Much larger hero image
    • Larger Add to Cart button

    15 Answers
    Avatar: Olga Barlow
    Olga Barlow
    Participant
    April 26, 2019 at 11:35

    Hello,

    1) To disable product category on grid go to Theme Options > Shop > Products style http://prntscr.com/nh587x
    You may try to implement a similar layout for other elements by custom CSS (Theme Options > Custom CSS) if you have the necessary skills, for example

    @media only screen and (min-width: 993px){
    .products-list .content-product .product-details {
        width: 40%;
    }
    }
    @media only screen and (max-width: 992px){
    .main-products-loop .products-list .product-view-booking .product-image-wrapper {
        width: 51%;
    }
    }
    .content-product .product-title a {
        font-size: 36px;
        line-height: 1.1;
    }
    .content-product .button {
        width: 100%;
        font-size: 18px;
        padding: 18px;
        background: #c6d5b3;
        color: #fff;
    }
    .content-product .price {
        font-size: 30px;
        color: #7f9eaf;
    }
    .content-product .st-swatch-popup > .et_st-default-holder ul.st-swatch-size-normal li.type-label a, 
    .content-product .st-swatch-popup > .et_st-default-holder ul.st-swatch-size-normal li.type-label span {
        font-size: .8rem;
    }

    or using WPBakery Grid builder https://wpbakery.com/video-academy/grid-builder/ and custom product content effect http://prntscr.com/nh54in

    2) I see that you chose initial instead of Uppercase http://prntscr.com/nh5730 Try to re-save options and clear cache.

    Regards

    Avatar: Tony
    Tony
    Participant
    April 26, 2019 at 13:57

    Thank you. I chose Capitalize but still nothing. The preview doesn’t reflect Capitalize either (see screenshot: https://puu.sh/DkbCF/350ed64bfc.png)

    Avatar: Tony
    Tony
    Participant
    April 26, 2019 at 13:59

    When I inspect a heading, i can see that the Capitalize style is being overriding by text-transform: uppercase
    https://puu.sh/DkbEC/3086b1f977.png

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    April 26, 2019 at 14:00
    Avatar: Tony
    Tony
    Participant
    May 6, 2019 at 20:03

    How can I have both “Add to cart” and “Show Details” buttons.
    I know that using the toggle in Shop > Catalog mode give me one or the other.
    https://puu.sh/DoGZY/ab34621be2.png

    Avatar: John Holden
    John Holden
    Participant
    May 7, 2019 at 05:21

    Hi,

    Could you please clarify a little better?

    Regards,
    Hung PD

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    May 7, 2019 at 08:22

    Hello, Tony

    To get an additional button like this – http://prntscr.com/nlepoz you need to add this code in functions.php of child-theme:

    add_action( 'woocommerce_after_shop_loop_item', 'additional_view_product_button', 11 );
     
    function additional_view_product_button() {
    global $product;
    $link = $product->get_permalink();
    echo '<a href="' . $link . '" class="button">Show Details</a>';
    }

    Read more – https://businessbloomer.com/woocommerce-remove-add-cart-add-view-product-loop/
    Or you can use an additional plugin. Please note that additional customization is not included in basic support, and we don’t give guaranty for full our theme compatibility with all 3-rd party plugins.

    Regards

    Avatar: Tony
    Tony
    Participant
    May 7, 2019 at 13:05

    Worked perfectly – thank you!

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    May 7, 2019 at 13:09

    Hello,

    You’re welcome!
    Would you mind to rate our product: https://prnt.sc/d256m6 https://themeforest.net/downloads
    That would be much appreciated ?

    Regards

    Avatar: Tony
    Tony
    Participant
    May 7, 2019 at 13:20

    And if I want the reverse of this (keep SHOW DETAILS by default and add ADD TO CART button), would that be:

    add_action( 'woocommerce_after_shop_loop_item', 'additional_add_to_cart_button', 11 );
     
    function additional_add_to_cart_button() {
    global $product;
    $link = $product->get_permalink();
    echo '<a href="' . $link . '" class="button">Add To Cart</a>';
    }
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    May 7, 2019 at 13:27

    Unfortunately, not. Catalog mode disables the ability to buy products so using it to change the functionality, of “Add to cart” buttons, that will be added in another way, is a bit incorrectly.
    Do you want to change the order of these buttons, what the purpose of the reverse? Please describe the desired result in more details.

    Regards

    Avatar: Tony
    Tony
    Participant
    May 7, 2019 at 14:36

    Yes, I wanted to change to order, but instead, I made them inline so they’re side by side and it works better that way. http://www.healthykidsmattress.com/product-category/mattresses/

    Thanks again!

    Tony

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    May 7, 2019 at 14:41

    Is there anything else I can help you with?

    Regards

    Avatar: Tony
    Tony
    Participant
    May 7, 2019 at 14:47

    Not for this topic. Thank you.

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    May 7, 2019 at 14:48

    You’re welcome!
    Have a nice day.

    Regards

  • Viewing 16 results - 1 through 16 (of 16 total)

The issue related to '‘Need to customize Shop page’' has been successfully resolved, and the topic is now closed for further responses

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.