Woocommerce Shop Layout Issue

Hey Guys,

I just updated my website with the latest woocommerce edition and WordPress. With the woocommerce update I had to manually updated outdated woocommerce files within X. When I updated x/woocommerce/loop/loop-start.php my shop layout changed to one column – although set as 2 columns in customizer, and I can’t seem to figure out how to fix that.

Any idea what’s going on?

Thanks!

I updated also but have not manually updated the outdated woocommerce files.

Is this easy to do or are you guys going to release a new update to theme to fix this?

It is super easy to do @leap. Woocommerce description can be a little tricky but you would basically just copy the file from the woocommerce plugin and replace the file inside X.

So for example, to update x/woocommerce/loop/loop-start.php you would find the correct file inside the woocommerce folder. Here’s my direct path to the correct folder: public_html/wp-content/plugins/woocommerce/templates/loop. Copy or download the “start” file, then find and replace the outdated “start” file inside the X folder. Folder direct path: public_html/wp-content/themes/x/woocommerce/loop. I copy and paste everything but you can also upload the entire file to replace the old one.

I hope this helps! I’m sure the X-team will correct me if I’m wrong :smile:

Ann

Hi guys,

Thanks for writing around! Yes that’s right, but the current supported WooCommerce version is 3.2.3 (see https://theme.co/apex/forum/t/troubleshooting-version-compatibility/195), you might have updated to the latest version 3.3.1. You probably need to downgrade to the supported version until an update is released or you can stick with the manual procedure https://docs.woocommerce.com/document/fix-outdated-templates-woocommerce/

Hope this helps!

I don’t mind manually updating the files, and I’d prefer not to downgrade if that’s an option. I was just hoping you’d have some suggestions to how to fix the shop layout.

Thanks!

Ann

@fikasem I think you need to make sure you update the class to match the theme within the new php templates using the classes from the old files.
e.g.

Hi guys,

Yes @leap is right, your site doesn’t inherit the theme classes, you need to update the classes as well however you can temporarily fix the layout issue by adding the following code in your Customizer:

@media screen and (min-width: 768px) {
    .woocommerce .products.columns-2 li:nth-child(2n) {
        margin-right: 0 !important;
    }
    .woocommerce .products.columns-2 li {
        width: 49% !important;
        float: left;
        margin-right: 2% !important;
    }
}
@media screen and (max-width: 767px) {
    .woocommerce .products.columns-2 li {
        width: 100% !important;
        float: none;
        margin-right: 0 !important;
    }
}

Hope this helps!

Hello, I am having the same issue. And I am no programmer. Can you please let me know exactly what/how do I have to update? Which classes?

Thanks

Hi @vitasloma,

If it’s the same cause then you may use the same CSS as provided above. Else, it’s probably different and we need to check it first. Would you mind providing your site’s URL that has this issue?

Thanks!

The site is http://shoppercocker.com/shop/

Hi,

Thank you for providing your site url.

You can add this in Theme Options > CSS

.woocommerce .products.columns-4 li.product {
    width: 22%;
}

.x-pagination ul {
    display: inline-block;
    margin: 0;
}

.x-pagination li {
    display: inline;
}

.x-pagination span.current {
    text-shadow: 0 1px 2px rgba(0,0,0,0.65);
    color: #fff;
    background-color: #ff2a13;
    box-shadow: inset 0 0.1em 0.35em rgba(0,0,0,0.65), 0 1px 0 0 rgba(255,255,255,0.95);
}

.x-pagination a, .x-pagination span {
    float: left;
    margin: 0 0.35em;
    width: 32px;
    height: 32px;
    font-size: 13px;
    font-weight: 400;
    line-height: 32px;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(255,255,255,0.85);
    color: #bababa;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: inset 0 0 0 transparent, 0 0.1em 0.45em 0 rgba(0,0,0,0.25);
}

Hope that helps

Hello, no, that doesn’t work at all.

I need it in 3 columns

It didn’t change a thing.

Can you give me another solution?

Thanks

Oh sorry, it did. However, the bottom of the page, where it says page 1 and 2 is still not fixed. Need help with that as well.

When do you expect to update X theme to be compatible with WP/WC latest releases?

Thanks

Hi @vitasloma,

Thanks for writing around! To fix the pagination part, you can make use of the following code:

.woocommerce-pagination ul {
    display: inline-block;
    margin: 0;
}

.woocommerce-pagination li {
    display: inline;
}

.woocommerce-pagination span.current {
    text-shadow: 0 1px 2px rgba(0,0,0,0.65);
    color: #fff;
    background-color: #ff2a13;
    box-shadow: inset 0 0.1em 0.35em rgba(0,0,0,0.65), 0 1px 0 0 rgba(255,255,255,0.95);
}

.woocommerce-pagination a, .woocommerce-pagination span {
    float: left;
    margin: 0 0.35em;
    font-size: 13px;
    font-weight: 400;
    line-height: 32px;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(255,255,255,0.85);
    color: #bababa;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: inset 0 0 0 transparent, 0 0.1em 0.45em 0 rgba(0,0,0,0.25);
    padding: 0px 15px;
}

Let us know how this goes!

Hi, thanks it worked.

Do you have a clue when you’ll do the testing and update the theme for the latest releases of WP/WC?

Thanks

Hi there,

Unfortunately, we can not give an ETA but we are sure it will be fixed on our major release which will be in February.

Thank you.

Thanks a lot - that means it’s soon!

You’re welcome.

Hello. I have taken away some other custom css and now I am back to a disarranged shop (even though I still have the CSS you posted up there). What should I change so my shop looks ok again? Thanks.

Hi there,

What did you remove? If you’re referring to the columns then please add this code to your global custom javascript.

jQuery ( '.woocommerce ul.products').addClass('cols-4');

Thanks!