- This topic has 14 replies, 2 voices, and was last updated 5 years, 2 months ago by
.
-
Posts
-
I want to list out products in a specific category on a page and I found how to insert them with a short code, but the layout doesn't look right. It only pulls in the product name and a large thumbnail image, and as you can see from this page the spacing is bad. How do I modify the style to make the thumbnail smaller, have it pull in some of the text (this could even be the "short description field", the price and a more info button which takes you to the product. The screenshot I've attached would be ideal. Any help would be appreciated. I gave my login into in a previous post.
Hi.
Thank you for contacting us.
We have a products list shortcode to show the products list as you want. You can check on this page: http://ip6.3b9.myftpupload.com/check-products-list-shortcode/
Thanks.
That's my old staging site, not the one I linked to above. I tried inserting Yolo Products List like you did in the example, and it still looks the same: http://00a.cd6.myftpupload.com/for-sale-test/
Hi again.
Please give me access for the new site. We will help you check it again.
Thanks.
Yes, we have checked and using the yolo product list shortcode for your test page. Please use the WPBakery page builder to edit that page.
Thanks.
Thanks. How do I get rid of the blank gray box? Is it possible to put a button in that box to take you to the listing and is it possible to list the price? Last, it would be better if we could make these listings and thumbnails shorter so there is less scrolling. How do we do that?
Hi again.
As I see, your product doesn't have the price. If you have the price, it will show on the listing.
If you want to reduce the thumbnail, you can use the custom CSS to reduce the thumbnail size.
Please check it again.
Thanks.
I can't see the box above. Would you mind being more descriptive of where the CSS code is to reduce the thumbnail? How do I get rid of these two unused elements in the screenshot?
Hi again.
We have added the custom CSS to help you hide that info.
Please check it again.
Thanks.
Can you please show me where you added that? Also, I still don't see how to make the thumbnails smaller so the rows aren't so tal. Where exactly do I do that?
Yes, we added the custom CSS to theme options/ custom CSS & Script. You also can use the CSS to make the thumbnails smaller.
This is the CSS we use to help you reduce the size of the product thumbnail.
.shortcode-product-wrap.list .woocommerce.list .product-item-wrap .product-item-inner .product-info { width: 70%; } .shortcode-product-wrap.list .woocommerce.list .product-item-wrap .product-item-inner .product-thumb { width: 30%; }Please check it again.
Thanks.
Thank you. Where can I find a list of the items that I can tweak the styles of for the listing page using this css? Is that something you can provide? For instance if I wanted to make the title text larger or the short description copy larger, or even the price. Or if I wanted to make the padding larger on certain items. Can you point me to the spot in the theme's CSS file? Also, shouldn't the thumbnail snap to above the text on mobile?
Jackie - how do I make the thumbails snap to be above the text and be bigger on mobile?
https://00a.cd6.myftpupload.com/for-sale-test/
Thanks
Hi again.
For everything you want to change the style of that product listing page, you need to add the custom CSS.
You the inspect element extension of chrome to find the correct CSS you want to change and add the CSS to the theme option. It will help you do anything as you want.
For the mobile CSS, you need to use the attribute: @media (max-width:xxx){} like this:
@media (max-width: 600px) { .shortcode-product-wrap.list .woocommerce.list .product-item-wrap .product-item-inner .product-info { width: 100%; } .shortcode-product-wrap.list .woocommerce.list .product-item-wrap .product-item-inner .product-thumb { width: 100%; } }Please check it again.
Thanks.
You must be logged in and have valid license to reply to this topic.
