Shop page ignoring Ultra theme

This topic contains 13 replies, has 3 voices, and was last updated by  Andrew Misplon 2 years, 7 months ago.

  • Author
    Posts
  • #2969

    Houseofconcrete
    Participant

    I have a problem with my WooCommerce Shop page in Ultra Theme. It doesn’t react to changes in templates e.g. to Full Width – No Title. That means the sidebar is still on the Shop page, which is the one I want to get rid of. In generel I have no oppurtinities to make changes the Shop page. The other Woocommerce pages (Cart, My Account, Checkout) works fine even with Page Builder template.

    Please help. Thank you in advance.

    http://houseofconcrete.dk/shop/

    #2973

    Puro Support
    Keymaster

    Hi Houseofconcrete

    Thanks for reaching out. We’ll take a look and report back shortly.

    #2982

    Puro Support
    Keymaster

    Thanks for the wait and for raising this challenge.

    If anyone wants to use a child theme for this challenge, I’ve created one here:

    https://purothemes.com/wp-content/uploads/2016/02/ultra-child-full-width-woocommerce-shop-home.zip

    The child theme removes sidebar and page header for the shop page. Child themes can be installed from Appearance > Themes > Add New: Upload Theme.

    Houseofconcrete, in your case, it might be easier if we use a CSS only solution. Activating a child theme causes Customizer and menu location settings to reset. This makes activating a child theme a little tiresome as you have to redo the above-mentioned settings. To try a Custom CSS only solution you’ll need a Custom CSS plugin like Simple Custom CSS. Once activated, go to Appearance > Custom CSS and insert:

    /* WooCommerce */
    
    .woocommerce.archive .entry-header {
      display: none;
    }
    
    .woocommerce.archive.sidebar #primary {
    	border: none;
    	width: 100%;
    }
    
    .woocommerce.archive.sidebar #secondary {
      display: none;
    }
    
    .woocommerce.archive.sidebar .site-content > .container {
    	padding-top: 3.57143em;
    }

    Hope that helps. Let us know how it goes.

    #3018

    Houseofconcrete
    Participant

    Sorry for this late reply. It worked very well and removed the sidebar. Thanks a lot!

    However it seems I have generel problems editing my WooCommerce Shop Page. It’s like it isn’t completely compatible with the Puro Ultra Theme. Have you experienced this problem before?

    #3019

    Andrew Misplon
    Keymaster

    Thanks for the feedback. I’d love to fix whatever problems you’ve run into. Could you perhaps provide further details on the shop page challenges you mention above. I’m sure I can solve them once I know more.

    #3025

    Houseofconcrete
    Participant

    I have a problem when I go to Woocommerce settings > Products > Display, when I try to change catalog images size (or the other images settings for that matter) it doesn’t change anything on the shop page. Do you know why?

    #3026

    Andrew Misplon
    Keymaster

    Thanks for your feedback. Ultra isn’t setting any WooCommerce image sizes. Are you regernating your thumbnails after making the image size change?

    Please, see: https://docs.woothemes.com/document/using-the-appropriate-product-image-dimensions/

    (Input the data and regenerate the thumbnails)

    You can use the following to regen. thumbnails: https://wordpress.org/plugins/regenerate-thumbnails/

    #3027

    Houseofconcrete
    Participant

    I have tried regenerating images now and still not working. All images on shop and product pages keep being the same default size. I think the problem is the same as earlier that theres a conflict between Ultra theme and the Shop page in WooCommerce. Can you provide any CSS solution like before but now just for image sizes?

    Thanks in advance.

    #3030

    Andrew Misplon
    Keymaster

    Thanks for your feedback. As far as I know, there isn’t anything in Ultra that’s setting WooCommerce image sizes. I’d be happy to test this for you. Please, use the Private Reply checkbox to send your URL and a set of temporary login details and I’ll take a look. What are the image sizes you’re changing to?

    #3031

    Andrew Misplon
    Keymaster

    Or, to quickly explain a little bit of the code that WooCommerce applies, please, view the below:

    .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
        float: left;
        margin: 0 3.8% 2.992em 0;
        padding: 0;
        position: relative;
        width: 22.05%;
    }

    The above rule is outputted by a WooCommerce stylesheet called: woocommerce-layout-css. What it says is that each product should take up 22.05% of the page, that leaves space for four products a row. That’s why you’re not seeing a change on the shop page. How many products to want per row?

    #3042

    Houseofconcrete
    Participant

    Thanks once again for the support. It is really appreciated.

    The above mentioned code worked fine. I would like to have three products pr. row and preferably center aligned. Can you provide the CSS style for that? That would be all from me now then.

    #3053

    Andrew Misplon
    Keymaster

    Sorry for not being clearer. You don’t need to use the above CSS. I thought it might provide a clearer picture to show the CSS being outputted by WooCommerce. To change the products per row it’s easiest if we use a child theme, that way we can make use of the WooCommerce built-in CSS. I’ve created one here:

    https://purothemes.com/wp-content/uploads/2016/02/ultra-child-woocommerce-3-rows.zip

    Install from Appearance > Themes > Add New > Upload Theme and then activate.

    Activating a child theme in WordPress will, unfrotunately, cause menu location and Customizer settings to reset. Those will need to be reapplied.

    Let me know how it goes.

    #3059

    Houseofconcrete
    Participant

    It’s me saying sorry for not understanding anything. I really liked the simple noobly-friendly Ultra theme design, but this Woocommerce is bad for my head 🙂

    I have now applied the child theme for my site. It works fine with 3 products per row now. However I still miss the center alignment of the whole page. I have 3 products on the first row and 2 products on the second row. Especially the second row I want to align to the center.

    However the child theme also changed the button colors to Woocommerce purple color. How do I change it back to theme color design?

    Huge thanks once again. This will be my last requests.

    #3064

    Andrew Misplon
    Keymaster

    Glad to hear you’ve made progress 🙂

    When activating any child theme in WordPress, unfortunately, menu location and Customizer settings will reset. If you’re using WooCommerce Colors plugin you can go back to the Customizer > WooCommerce and reapply your settings. There is unfortunately no way around the settings reset that occurs when activating a child theme.

    To try change WooCommerce from a left aligned product layout to a center aligned one, try adding the following at Appearance > Custom CSS:

    .woocommerce ul.products {
        text-align: center;
    }
    
    .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    	display: inline-block;
        float: none;
    }
Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

Scroll to top