It looks like you have created a custom product archive page using Views.
I can't see how you have added the image to your archive, you may be using the featured image shortcode (wpv-post-featured-image) or the product image shortcode (wpv-woo-product-image).
Assuming you are using the featured image shortcode, you need to wrap it in a link to the individual product page.
As for adding spacing around your text, again, I can't quite see how you are adding it, but you need to add padding to the elements where you want to increase the spacing.
In the template where you insert this text you can add custom class names to individual elements or their wrappers and then target those by adding some custom CSS.
e.g., if you have
<h2 class="extra-spacing">Some title</h2>
then you can add a CSS rule to the CSS editor like
.extra-spacing {
padding: 16px;
}
Try the above and let me know if you have any problems.
Thanks so much Nigel!! Those code snippets worked perfectly and now I see exactly where to enter my CSS for other styling around the templates. Super helpful!
Another issue though - I followed one of the video tutorials and for some reason I'm not getting the results. My photos on my Single product templates are staying small and the gallery images are staying on the right side. I'd like a big image with small gallery images below the main photo.
this is the CSS I'm using:
.woocommerce.content-full-width div.product div.images {
width:100%
}
and screenshots show the details from the site. I followed the tutorial to the "T" - any idea why it's not working?
If you use the standard WooCommerce template to display single products you will note that the layout has the image and thumbnail gallery on the left half of the page, and extra fields such as price and add-to-cart button on the right half of the page.
The shortcodes which Toolset provides when you design custom templates for WooCommerce products and the product archive (shop page) are built on top of WooCommerce and recreate the same UI elements, but allow you to position them elsewhere.
It is a peculiarity of the product image UI (main image plus thumbnails below) which the wpv-woo-product-image shortcode recreates that it only takes up half of the available space, specifically the left half, with the expectation that the right half will be used for the other fields in a similar layout to the standard WC design.
So if you add the wpv-woo-product-image shortcode to a cell which itself occupies only half the width of the page, then the image UI itself will only occupy a quarter of the width, no matter what setting you specify for the image width.
If you want a display format that doesn't have images on the left, other content on the right, you will need to hack into the CSS to override the default layout, or not use the WooCommerce image UI at all and create your own.
It is not ideal but results from building on top of WooCommerce's own functionality.
I'm confused as I followed the tutorial video for setting up my template, I made a custom one like in the tutorial. In the video he changed the css, as I did to mine and made the change I'm looking for. Am I using the wrong template or page template builder or something else that's giving me different results from the tut? I used the same css they used:
Or as a hack, I just tried to use "featured image" instead of woocommerce image and that gave me a full size photo, but is there a way to show the small product gallery photos, as well?
Trying to think of all solutions...any help much appreciated!!
I saw the custom CSS added in the video and I checked it on a local test site and it didn't work for me, I suspect it is particular to the theme that was being used for the demonstration.
It is simply a question of working out an alternative CSS selector to target that container element and setting its width to 100%.
The rules set by WC themselves are very specific, making it hard to override without turning to !important, which I only use as a last resort.
So, what I did was
- Edit the Layout for single products and added an id of wc-custom-images to the cell containing the wpv-woo-product-image shortcode, as shown in the screenshot.
- Added the following CSS rule at the page Layouts > Custom CSS and JS
Note I'm employing a minor CSS trick here. Because the existing WC CSS rule is so specific, we need an even more specific rule to overwrite it. Using #wc-custom-images for the container isn't specific enough, but we can repeat it (no space), which is equivalent to using it once but is much more specific, meaning we win the battle to set the width on the required wrapper for the image UI.
