[thecashbagParticipant]

I am creating WooCommerce category pages using their short codes (e.g. [product_category category=”backyard-chicken-coops”]).

But they are displaying strangely. All the products are ‘staggered’ down the page. See example here: https://petpresto.com.au/backyard-chicken-coops/

I have tried to use different pages templates to fix it, but it happens with all of them.

Maybe there is a better way to make these category pages without shortcodes that will fix the problem? I just assumed this is how it was done.

[thecashbagParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi,

Thanks for writing in!

To fix it, you can add this under Custom > CSS in the Customizer.

.page-id-686 .entry-content  pre,
.page-id-686 .entry-content  li {
    line-height:0;
}

Hope that helps. 🙂

[thecashbagParticipant]

Thanks for helping with the CSS fix. It seems to have corrected that issue.

Do you think this is a problem that should be corrected in theme code instead of applying a Custom CSS patch? If its something that is happening only to my install I want to figure out why so I can stop it affecting other areas, and if its a problem that is replicated on other installs it should probably be added to the development queue as a big fix.

Also there is another strange problem occurring on my product pages. When you visit this page, you cannot scroll down to see the product description. It just won’t scroll past the image area. But if you wait a minute it then loads the rest of the page which is very slow to appear. Then after that you scroll to the bottom and under the footer another version of the product page appears again. Please see here: https://petpresto.com.au/product/the-bungalow-large-chicken-coop-with-run/

[ChristopherModerator]

Hi there,

This is not problem,this caused by <pre> tag ,you can try adding woocomerce shortcode without this tag.
Regarding to your second issue,Please make sure you are using woocommerce 2.2.8 .
Deactivate all plugins (except those recommended by X). 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.
If it doesn’t help please activate default wordpress them and check ,if the issue only happen with X then let us know.

Thank you.

[thecashbagParticipant]

Hello,

I deactived all plugins, problem still persisted.

I switched themes to twenty fourteen and problem disappeared.

So I think that means the problem is related to Theme X?

Thanks,
Ben

[Kosher KMember]

Hi Ben,

Checking on the single product page, There is probably something wrong with the layout formatting for single product page.

I can see the entry-wrap division which is the base container of the product content has been re-added right before the closing of the body tag, and you can see the content is duplicating after the footer.

The default single product display for renew stack should look like this https://theme.co/x/demo/shop/renew/product/bucky/

I also noticed that you have a lots of plugins, Can you please disable them so we can continue on checking the problem with this.

Default wordpress theme doesn’t have any custom woocommerce template while X has its own woocommerce template that might be conflicting with one of the plugin you used.

[thecashbagParticipant]

Hello,

The only plugins active right now are WooCommerce, Visual Composer, and X-Shortcodes. The problem is still happening. I leave the other plugins disabled until you can find the problem.

I’m not sure what you’re talking about with entry-wrap, etc, as I’m not much of a coder, but I can kind of follow what you’re saying.

Please use the login details above to change whatever you please to get it working.

Thanks,
Ben

[Kosher KMember]

Hi Ben,

I just made a force update on X by changing the version number in style.css, and that seems to sort out the issue,

You can now see the product page display in here is working properly.

Hope that helps,

Cheers

[thecashbagParticipant]

Thanks! seems to be working now

[Kosher KMember]

Glad to hear that,

Cheers

[thecashbagParticipant]

I am having more problems with category pages showing strangely. The products were showing staggered down the page.

This is the original CSS code you provided to fix this bug:

.page-id-686 .entry-content  pre,
.page-id-686 .entry-content  li {
    line-height:0;
}

Due to the page-id it was only working on one of my category pages. So I tried implementing this code:

.entry-content  pre,
.entry-content  li {
    line-height:0;
}

But that code was effecting other areas, like my bullet point spacing on product pages etc.

So at the moment my only way to remedy this was to add a new CSS edit for each category page I need. It’s a fairly clumsy fix as my categories can change often and this growing amount of CSS edits will need to be updated constantly. Is there another way I can fix this? Shouldn’t it be addressed within the core Theme X code as it seems like a fairly large bug?

NOTE: Strangely after changing the CSS back to the version with the page-id it no longer works. I’m not sure why this is happening either. So now none of my category pages are displaying correctly.

[Paul RModerator]

Hi,

Sorry that you are still having issues with this.

You can try the code below instead.

.page .entry-content  pre,
.page .entry-content  .woocommerce ul.products li {
    line-height:0;
}

Hope that helps.

[thecashbagParticipant]

No unfortunately this has not solved the problem.

Please fell free to login using the details I gave earlier on this thread to take a look if you like.

[Paul RModerator]

Hi,

I have chaged the code to this.

body.page .entry-content  pre,
body.page .entry-content  ul.products li {
    line-height:0 !important;
}

It seems to have fix the issue.

Please check at your end.

Thank you.

[Author]

Posts