Woocommerce Styling

Support
#1

Hi Team X!

I wanted to know what was the safest way to customize Woocommerce pages that were influenced by the selected stack. For example, I see two customizations that I would like to do: on the shop page, when you hover over the products, the add to cart button appears. I prefer the add to cart button be position under the photo of each product on the shop page. Another one would be to move the thumbnails on the top-right of the the large image container on the single product page to under the larger picture.

Also, how would you change the proportions of the images being displayed. All images I uploaded are cropped to a square but I would rather have them be landscape, even if it means they occupy a little more space on the single product page, or shop page for that matter.

Some of these behaviors, if not all are driven by the Integrity stack that I have selected. Is it possible to simply to have two different stacks, one for Woocommerce pages and the other for the remaining site? If not, what is the best approach is modifying Woocommerce styles without breaking the layout responsiveness.

Thank you!

#2

Hey there,

The safest way is to use a child theme and do all your customizations there (see https://theme.co/apex/forum/t/setup-how-to-setup-child-themes/57). For CSS, the best way to override theme styles is to add your CSS in X > Launch > Options > Global CSS. For PHP, some parts could be overridden thru functions.php and others need template modification.

For the add to cart button, please add this code in your Custom CSS

.woocommerce li.product .entry-header .button {
    opacity: 1;
}

That will display the button permanently. Positioning would require extra custom development which is outside the scope of our support. For that, you will need to hire a developer.

For the product gallery, please add this code to your child theme’s functions.php

add_filter( 'after_setup_theme', 'remove_new_wc_features', 99 );

function remove_new_wc_features() {
  remove_theme_support( 'wc-product-gallery-slider' );
}

For the image proportions, please go to WooCommerce > Settings > Products > Display and set the Product images’ size. Catalog is for shop and category display. Single product image is the large image you see in the single product page and the product thumbnails are the product gallery images. After you’ve set the size, you must regenerate your image using a plugin like Force Regenerate Thumbnails.

Hope that helps.

#3

Thank you for that prompt and thorough response!

Regarding the “add to cart” button, is this the consequence of the selected stack or is this the default behavior for Woocommerce under X?

I was able to successfully move the thumbnails on the single product page under the large photo. Thank you.

As far as the size image sizes are concerned, the only option under WooCommerce > Settings > Products > Display, is “Product Thumbnails”. It was set to 100x100. I changed this to 200x100 just to see its affects. I then download the regenerate thumbnails plugin and I don’t see any change. When I inspect the large image on the single product page and the thumbnails, now underneath, I see only one size: 400x400.

Thanks again.

#4

Hello There,

Thanks for updating in! The add to cart button is the default behaviour for WooCommerce in X. This is how we have designed the button.

With the latest release of WooCommerce, they have changed the way the product image is displayed. They added product slider and gallery zoom. In the latest release of X, we have accommodated the changes as well so that user will have the option of using these new features of WooCommerce. And this is enabled by default.

If you just want the basic product images (assuming that the child theme is set up), please add the following code in your child theme’s functions.php file

// Remove product gallery slider and gallery zoom
// =============================================================================
add_action( 'after_setup_theme', 'remove_woo_three_support', 11 ); 
function remove_woo_three_support() {
    remove_theme_support( 'wc-product-gallery-zoom' );
    remove_theme_support( 'wc-product-gallery-slider' );
}
// =============================================================================

And to have a full control over the WooCommerce product images, namely the catalog, single and thumbnail image; we need to add again those settings inside the Woocommerce Product Display settings page. We need to add a custom code inside your child theme’s functions.php.

// Do Not Remove Woocommerce Plugin Settings
// =============================================================================
function x_woocommerce_donot_remove_plugin_setting(){
  if ( ! is_admin() ) {
    return;
  }
  remove_filter( 'woocommerce_product_settings', 'x_woocommerce_remove_plugin_settings', 10 );
}
add_action('init', 'x_woocommerce_donot_remove_plugin_setting');

Once added, you will have the Product Display Image option settings back. You can check it out in Woocommerce > Settings > Products > Display tab; http://prntscr.com/6eysla
After changing the image size for your products do not forget to regenerate your thumbnails.

Please let us know if this has work for you.