[Support request] CSS for WooCommerce shortcodes at home page

[Juned]

Hello Team,

I have used Product/Service details at my Home Page. I have also displayed some subcategory products and services. I wanted to use WooCommerce shortcodes but they are not looking proper. From design point of view, they are appearing too big in sizes and instead of column, they are reflecting vertically.

I want to show desired categories, sub-categories and products at my home page only. Kindly suggest proper css. I tried some of the previous threads, but they didn’t worked out, hence I am reaching you finally.

I will use WooCommerce shortcodes using Container and Grid, at home page.

Please suggest.

[David]

Hi there,

can you share a screenshot of the section you want to change and what the current issue is ?

[Juned]

Sir, I am trying to display desired WooCommerce Categories, Subcategories and Products at Home Page, via WooCommerce shortcodes, placed by: container -> shortcodes.

I want to do this at home page only.

When doing this now, the images are looking too big and vertical. That’s the reason, presently at my home page I am using GP + GB, container + grid + buttons.

I guess, it will require CSS only.

Just like it has been displayed at Library sites home page.

[David]

Still a little vague 🙂

For sure you can use some CSS to style those shortcodes, but for us to assist with that i would need to a) see them on the site and b) a ‘mockup’ of how you want them to look.

[Juned]

Sir, just like at Niche or Prime theme, I tried to place the WooCommerce shortcodes (under container + shortcode or container + grid + shortcode), but the appearance is not coming as like I am having at my current site’s shop or category pages. Those images are apprearing in big sizes and in vertical, and not like at they are shwoing at Home Page of Niche or Prime theme.

[Elvin]

Hi there,

I tried to place the WooCommerce shortcodes (under container + shortcode or container + grid + shortcode), but the appearance is not coming as like I am having at my current site’s shop or category pages.

This is why we need a mockup image of how you want things to look. So we have an idea and a reference for the CSS write-up we’ll be giving you to achieve the preferred layout/style. 😀

Those images are apprearing in big sizes and in vertical, and not like at they are shwoing at Home Page of Niche or Prime theme.

Can you point us to the part of the page you’re trying to style with CSS and provide a mockup image of how you want it to appear?

[Juned]

Hi,

Actually I am having a live site, so I am trying to explain you one more time, else I will create a staging site.

I want to use shortcodes like:
[product_categories ids=”95, 102, 126″]
[products limit=”100″ columns=”4″ orderby=”popularity” on_sale=”true” category=”men”]
[products limit=”4″ columns=”4″ orderby=”popularity” ]

I want to use these only for my site’s home page. The final result should display same as layout as it is on my Shop + Category + Sub-category pages (same images + pricing + button).

Hope it is clear to you now?

Note: When I am using these shortcodes then the images are displaying too big and in vertical (01 big image in one row).

(Since i was not getting the desired display result, so I created those by using Container + Grid + GP Buttons, without pricing. You can see that at my Home Page – Browse Our Categories | Featured Sub-CATEGORIES | Book On-demand Services). Now I want to display these via WooCommerce shortcodes.

[Elvin]

(Since i was not getting the desired display result, so I created those by using Container + Grid + GP Buttons, without pricing. You can see that at my Home Page – Browse Our Categories | Featured Sub-CATEGORIES | Book On-demand Services). Now I want to display these via WooCommerce shortcodes.

Since you created it within the Block editor, you can place the shortcodes on a Container block with a Shortcode block inside it.

I believe pricing has a shortcode as well but I’m not exactly sure what it is. You can refer to WooCommerce documentation for it.

Once you’ve done this, you can show it to use so we can inspect its structure for CSS writeup incase you need it.

[Juned]

I have attached the url of staging site for your ready reference.

I have used shortcodes also. Plus you will find (containers below shortcodes) what I am trying to achieve.

[David]

Styling the Category shortcodes isn’t the real problem here.
On you current layout you have a description ( and a Button ) below the Title and Image – where does this description come from ? Is it the Product Category Term description ?

[Juned]

Sir, content and buttons are also not a problem. We can skip that. I want to stick with actual shop categories, subcategories and products and their prices and buttons.

Will it impact on site performance? Using shortcodes would be lighter or existing one is lighter?

[David]

Currently, i assume you have some optimization plugins that are disabling some Woocommerce Stylesheets on the home page, as thats why they are not displaying in columns.

The existing method would be lighter. Shortcodes have a little bit of impact on performance, and you would need to make sure those excluded CSS files are loaded on the front end.

[Author]

Posts