Woocommerce category pages misaligned after update

Support
#1

Hi guys,

My category pages have become misaligned and the next page links are out of each too

All of this has occurred since the double WP update and the woo commerce update

any help would are greatly appreciated.

Thanks,

Brent

#2

Hi Brent,

Try to clear your cloudflare cache then check again.

https://kb.site5.com/cloudflare/clearing-cloudflare-cache/

#3

Hi,

I only set up cloud flare last night,

These issues have been happening since before that.

I did however clear the cache and the issue still persists

thanks,

Brent

#4

Hi Brent,

There seems to be something off with your site as the icons are also not shower aside from the products not displaying correctly. Would you mind testing for a plugin conflict? You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Let us know how it goes!

#5

Hi Jade,

I deactivated all plugins except for woo commerce and the issue still persisted.

Also the time from when someone places an order to the time the order completed page loads is now about 1 minute.

Any help you guys can offer is great appreciated.

thanks

Brent

#6

Hi again,

Please add the following code in your Customizer:


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

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

Let us know how this goes!

#7

that worked great. thanks very much for the help

#8

Glad we could help.

Cheers!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.