[Resolved] Woocommerce Element Styling

[troyw]

Hi guys,

I am a bit lost as to where to start with styling Woocommerce. I have activated your Woocommerce Element, but it is not allowing me to style things like the ‘On Sale Products’.
If for example I add the Woocommerce On Sale Products Grid into the Home page blocks, the image is massively oversized and text is located below image, instead of to the right of the image where I would prefer it.

Alternatively, I can use the shortcode [sale_products limit=“4” columns=“4”] and this does present better, but I still cannot see how I can style this.
Should I be using the Woocommerce Blocks and if so, how do I style them?
Or am I better to use the Shortcodes and if so, how do I style these?
Or am I missing something in your Woocommerce Elements?

View website by updating Hostfile to: 43.250.140.4

Thanks

[Leo]

Hi there,

GP’s WooCommerce module can only provide styles for the archive/shop product loops – it cannot controlled the layout of shortcodes and WooCommerce blocks as it’s not supposed to.

I would say that using the shortcode or WooCommerce blocks is a tossed up. I built Prime template with WooCommerce blocks before but then encountered some issues so decided to switch to shortcodes instead.

For styling WooCommerce shortcodes, you’d need to write some CSS for it.

[troyw]

Thanks Leo, I was kind of thinking those Woocommerce Blocks were a bit tricky, So I will stick to the shortcodes.
Using [sale_products limit=“4” columns=“4”] or [featured_products limit=”4″ columns=”4″], how do I get the text to sit to the right of the image and how can I size the image?
Are you aware of any sites where I might find some CSS for styling the Woocommerce Shortcodes?
Thanks

[Elvin]

Hi troyw,

For starters, its best to know CSS from Woocommerce’s official docs.
https://docs.woocommerce.com/document/css-structure/

And its best practice.
https://docs.woocommerce.com/document/customizing-woocommerce-best-practices/

Aside from these information/s, it helps a lot to know how to inspect sites and read the DOM structure for CSS class selectors. This probably is the most important skill next to knowing actual CSS coding as you have know which class selectors Woocommerce use to be able to style its elements.

Hope this sheds a bit more light. Don’t hesitate to ask further if you have more questions.:)

[David]

Hi there,

can i see a link to a page where GP is used and the shortcodes are place ? Might be able to provide some CSS for the alignment.

The image size can be set in Customizer > Woocommerce – however the number of columns will also affect their sizing. So making the image smaller may not be an issue – making it larger it may max out on based on your column widths.

[troyw]

Hey David, thanks for getting back.

The short codes are on the Home page and it is the [sale_products limit=“8” columns=“1”] lower down the page that I am trying style. Basically I am trying to present multiple sale items on a single slider.
This is kind of what I am trying to achieve, though probably don’t need the countdown.
https://postimg.cc/7fSpNw7p

Thing is there is also a [featured_products limit=”4″ columns=”4″] shortcode higher up the page, which I wish remain as 4 or 5 columns with price and description below the image.

The link is to the dev site in this post, but you may need to update you hostfile to see it: 43.250.140.4

Thanks again

[David]

I am having difficulty accessing the site.
Can you provide the exact input i need for my host file

eg.

mysite.com 43.250.140.4

You can add it to the Private Information field in your reply.

[troyw]

Hey David,

Not sure why there are access problems. Its the same 3rd party hosting account that I build a lot of my sites on and I am accessing it remotely same way. Very strange. Could it be something to do with the ssl?
Anyway, give this a go.
Cheers

[David]

Ok – got there in the end – had to change some permissions my end.

So looking at the site – you have multiple shortcodes, and the Sale one is going to require more content then is being displayed in the others. Which the Woo shortcodes don’t support – in a nut shell what you set in the Customizer for shop layout is what every shortcode displays.

It would require Custom Development or a plugin especially considering the Slider – i had a quick look to see if there were any plugins that do all of that but came up out of luck.

[troyw]

Hey David,
Sounds painful so I will change my plan and do something else with this space.
Thanks anyway.

[David]

No problems. 🙂

[David]

No problems. 🙂

[Author]

Posts