Shop not displaying product columns properly

Support
#1

Hi there,
On my site that I am developing, https://taylorstaging.wpengine.com/product-category/bracelets/shred/, the products aren’t displaying properly and I can’t figure out why. They should be showing in rows of three, but every other row only has one. How can I fix this?

Thanks!

#2

Hi There,

Thanks for writing in!

Can you please add this CSS to your Theme Option -> CSS and let us know if that fixes your issue.

.woocommerce li.product.first {
clear: none !important;
}

Hope this helps!

#3

Ok, that worked great!

Another two questions:

I’ve been able to add the User icon to the menu, but I would like it to be the light version of the icon and I can’t figure out the code to make that work.

Here is what I am using in the Menu Item:

This is the icon I would like to use - https://fontawesome.com/icons/user?style=light

Second question is how can I get the Cart ( using handbag icon in Pro Builder) to show items and total in the menu without having to click on it? I would like for the total and items in the cart to show in the menu whenever someone adds them to their cart.

Thanks for the help!

#4

Hello @powrider686,

  • Please update your icon code and use this:
<i class="x-icon x-icon-user" data-x-icon-l="&#xf007;" aria-hidden="true"></i>
  • Regretfully adding the number of items and the total in the menu is not available in the cart menu element at the moment. It has been already added as a feature requests in our enhancements list. Once our developers were able to integrate it, the cart element will be updated and rolled out in the next release update cycle.

Thank you for your understanding.

#5

Ok sounds good. First fix worked!

Another question:

I used this method - https://theme.co/apex/forums/topic/make-a-clickable-column/ to make my columns clickable on my homepage, but now the margins have disappeared. I tried adding margins to the elements themselves but they only kind of work. The columns are all slightly to the left and I can get them to display centered.

I tried using the code in the above method but it doesn’t work. Can you help me add the margins back to these columns or is there a better method to make all of the columns clickable?

Thank you!

#6

Hey @powrider686,

The solution provided in the old thread would break the column layout as you have experienced now. That can’t be easily fixed by editing the column margins. With that said, I’d recommend that you first remove the margins from the columns then remove the code given in the other thread and follow this setup.

  1. Replace the Headline element with a Button element
  2. Set the Button’s Width and Height to 100%
  3. Set the top and bottom paddings of your button to fill the space.
  4. (Optional) Add the code below to your Row’s element CSS to make the columns the same height.
@media (min-width:768px) {
  $el {
    display:flex;
  }
}

Here’s a demo of the setup: https://youtu.be/FF8c10CxZUc.

Hope that helps.

#7

Ok that worked great for the triple columns near the top of the page! Thank you!

How could I achieve the same thing on the double columns further down the page that have both a heading and a button?

Appreciate it!

#8

Also, for the first two images / columns on the page, how might I make the entire image area clickable? There are multiple elements and I havent figured out how to do the button trick, but it would be great to make the whole area clickable.

Thank you!!

#9

The button method won’t work for that case but the wrapping a button inside a link is not valid.

Regretfully, for that case, you will need to remove the button and manually code HTML in a Text element like this:

<a href="#">
<!--content-->
</a>

You can also use the Global Blocks to build your content and put the block’s shortcode inside an anchor tag like this:

<a href="#">
[cs_gb id=3396]
</a>

The important thing here is that the link must be within the column unlike in the previous thread where the link wraps the column and that will break the layout.

Thanks.

#10

Ok, great thank you.

On this page - https://taylorstaging.wpengine.com/studio-limited-release/, the products aren’t displaying properly and I can’t figure out why. Can you help me get these products displaying properly in two rows?

Thank you!

#11

Please remove the custom CSS given by Basanta previously. That is breaking the layout.

I’m not sure why it fixed the issue in your first post but it now breaks your category page so it’s not the proper solution. I don’t know your previous setup but it could have just been a version incompatibility issue and you could have updated Pro and/or WooCommerce that is why the code given now breaks.

Thanks.

#12

OK, I removed that but nothing changed. What else can I do?

Thank you!

#13

You’ve added the code twice. One in Theme Options > CSS and in your page’s Content CSS. Please remove it from there also.

Thanks.

#14

That did the trick! Thanks for catching that.

#15

Glad we were able to help :slight_smile:

#16

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