Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
hi! thank you in advance. i am looking for the ‘right’ way to put a second sidebar on the left side of my store but keep the standard one on the right on other pages. additionally i would like to have it disappear entirely just on the categories and sub-categories pages. is this possible and relatively easy or is a plugin the right approach?
secondly, i noticed when i was scaling the size of the thumbnails on the store pages i couldn’t get it to display 3-across. it would go from 2-across to 4-across. any ideas?
thanks much!
d-_-b
Hi D-_-b
Thanks for reaching out.
If the sidebar is free of widgets it won’t display. You can use Jetpack Widget Visibility to set display conditions: http://jetpack.me/support/widget-visibility/. If no widgets are set to display on a page, for example all category pages then the sidebar won’t display.
Adding an additional left sidebar is unfortunately beyond the scope of support we’re able to offer. If you’re interested in getting this feature developed we recommend the developers at https://codeable.io.
Please, try adding the following at Appearance > Custom CSS to get your shop pages to display three categories in a row:
/* WooCommerce */ .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { width: 31%; }Example page: https://nectarcollector.org/shop/
hi! thank you for your reply! so i figured out the widget/sidebar issue except a left sidebar.
do you know if Custom Sidebars by wpmudev (https://wordpress.org/plugins/custom-sidebars/) will work with the Vantage theme? if not is there a preferred plugin for this?
for the woocommerce display question i didnt explain the issue i am having enough; my apologies. i made the change you noted and while it does display the items 3-across it keeps them in groups of 4. when i implement the css you provided it displays the thumbnails as follows: 3 thumbs then on the next row there is 1 thumb and 2 empty spots and then it repeats; 3, 1&2, 3, 1&2. i need the thumbs to just flow into whatever grid is defined.
my apologies if this is convoluted or a pain.
as always, thanks in advance!
d-_-b
Glad to hear you’re making progress.
I haven’t tried Custom Sidebars but it looks similar to Jetpack Widget Visibility or WooSidebars in that it’ll need to use existing widgets areas within the theme. It should work fine with Vantage but I’m not sure it’ll do what you’re looking for. I unfortunately can’t recommend a plugin for adding a new left sidebar, I haven’t used one in the past.
Take a look at your Custom CSS to make sure we’re not doubling and adding conflicting rules. You could try the following:
woocommerce ul.products li.product, .woocommerce-page ul.products li.product { float: none; width: 31%; display: inline-block; }this worked! thank you! now i have one issue that arose. the items are aligning to the bottom and not the top; how can i solve this?
thanks again for all your help!
d-_-b
ok, i figured that out right after i sent the previous message. never mind. it does raise one more question; now that it is aligned to the top the price and button hang based on product name length and star rating. is there a way to get those to align to the bottom of the row?
Sorry, not quite following. Are we looking at the single product page? If you could confirm the page we’re working on I’ll take a look ASAP.
hi, sorry if i didnt communicate my issue well. now that the products are flowing into the grid properly and i have them aligning to the top the bottoms are hanging at different levels due to product name length and the presence of rating stars. what i want to do is have the top of the pics stay top aligned but get the price and button to align to each other along the bottom.
sample page:
https://nectarcollector.org/product-category/wet/
on this page for example, price and button for the second item, the micro, is hanging lower than the other prices and buttons due to the star rating being present (this also happens if the product name is large enough it spills to a second line as you can see with the last three pendant products on that same grid). i want the price and buttons to align to each other at the bottom of the row.
thanks! i hope that made better sense.
d-_-b
Thanks for the wait and for the update. Please, try the following at Appearance > Custom CSS:
.woocommerce #page-wrapper .button { bottom: 0; position: absolute; } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { min-height: 487px; }works perfectly! thank you! that moved the button but not the price but it is good enough for my purposes.
i do have another question that is unrelated to this issue but i dont know if you want me to start another thread. can you give me info on how to have items display on mobile only and how to hide items on mobile only? my end goal is to display a different sized slider on my home page on mobile than what i have now.
https://nectarcollector.org/
thanks again for everything!
d-_-b
hi! me again. so i spoke to soon. after i added the css everything looked ok but then after running through the page a bit i noticed that the woocommerce ‘filter by price’ widget was missing its ‘filter’ button. after looking i noticed it was up at the top of the body and to the right of the sidebar. is there a workaround for the woocommerce widget buttons to ignore the css you provided for the ‘regular’ buttons?
thanks!
d-_-b
I’m not sure how you’d display some products on mobile. Sorry, not something we’ve looked at before. You could perhaps search for a plugin solution. It’s possible that one exists.
Try changing our CSS to the following to limit its scope:
.woocommerce #page-wrapper li.product .button { bottom: 0; position: absolute; }that did it! awesome!
as for the mobile question; i am not looking to display certain products on mobile, i am looking to display a different meta-slider on the home page of mobile versus the one that appears normally. the current slider looks very tiny when it shrinks down so i want to have it swap for a different one when it reaches the responsive width threshold. so i was guessing that this could be done with a css selector like .mobile-theme or something comparable that would allow me to hide one and show another (which i can use then for other items down the road ie. header widgets, sidebar items, etc.).
thanks!
d-_-b
Glad that helped.
Meta Slider doesn’t have a way to do this out the box. It won’t exactly be helpful for your load time but you could try inserting a slider after your existing slider and then use the following at Appearance > Custom CSS to swap them:
/* Mobile */ @media (max-width: 680px) { .metaslider:first-of-type { display: none; } .metaslider:nth-of-type(2) { display: block; } }We’re heading into custom development territory here though. Just a quick heads up.
understood. my question on the slider may have been too narrow a question and based on incorrect info. i am under the impression there is a ‘mobile’ selector i can use with css. is this incorrect?
thank you for all your help and this will be it (fingers-crossed)! :)
d-_-b
CSS offers up media queries based on screen resolution. If you’re asking if you can target the existing slider and change it for mobile, it could perhaps be done, but it would be with media queries.
In CSS there are media queries and device queries. Within that area, the above CSS is all I can really think of. If you had a developer help out you could create a child theme and use the WordPress is_mobile function to switch sliders if a mobile device is being used.