- This topic has 11 replies, 4 voices, and was last updated 1 week, 1 day ago by David.
September 8, 2020 at 6:02 pm #1435948troyw
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: 22.214.171.124
ThanksSeptember 8, 2020 at 8:23 pm #1436015LeoStaffCustomer Support
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.September 8, 2020 at 8:30 pm #1436023troyw
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?
ThanksSeptember 8, 2020 at 8:43 pm #1436029Elvin Customer Support
For starters, its best to know CSS from Woocommerce’s official docs.
And its best practice.
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.:)September 9, 2020 at 2:02 am #1436236DavidStaffCustomer Support
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.September 9, 2020 at 4:44 pm #1437355troyw
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.
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: 126.96.36.199
Thanks againSeptember 10, 2020 at 3:26 am #1437768DavidStaffCustomer SupportSeptember 10, 2020 at 4:05 pm #1438662troyw
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.
CheersSeptember 11, 2020 at 1:26 am #1438932DavidStaffCustomer Support
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.September 14, 2020 at 7:01 pm #1443413troyw
Sounds painful so I will change my plan and do something else with this space.
Thanks anyway.September 15, 2020 at 1:38 am #1443697DavidStaffCustomer SupportSeptember 15, 2020 at 1:38 am #1443698
- You must be logged in to reply to this topic.