Woocommerce single product page customization for image size, gallery, and placement

Support
#1

I would like to change the size of the featured product images and make them responsive and get rid of the zoom feature and maybe have those images display like lighbox does. Also is there a way to change the 2 column layout and maybe use a stacked layout with the product title on top of the featured image(s) gallery, then below that have all the ‘add to cart’ options/button and below that have the product details/description content. I don’t know who I should be asking since this also is in part with Woocommerce.

Thanks - as always :slight_smile:

#2

Hi,

To disable zoom, you can add this in your child theme’s functions.php file.

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

Then you can add this in Theme Options > CSS

.woocommerce div.product .images {
    position: relative;
    float: none;
    width: 100%;
}

.woocommerce div.product .summary {
    float: none;
    clear: both;
    width: 100%;
    margin-top: 20px;
    display: block;
}

Hope that helps.

#3

paul.r Staff,
Thanks, this got the two columns of the single product page to stack but I’d like to have the stacking in this order:

Title
Featured image(larger and responsive from about 600px width)
Gallery thumbs
In Stock
Quantity of purchase
Add to cart
Description and any other product tabs that are used.

currently the single product page now looks like this:
http://wishcandle.com/product/heirloom-spalted-sycamore/

#4

and I deleted the content that I had in the single product page content box such as the product description yet it still shows up the same on that product page. There is content entered in the short description box below but that tab doesn’t even show up although on the woo commerce product settings it’s set to show that tab. Things should really be much more organized and not multiple CSS entry fields, customize pages, multiple woocommerce admin pages etc etc. That might clear up many of the repetitive questions I’ve seen people ask here.

#5

Hi,

I can see you have updated Cornerstone to latest version but forgot to update your theme.

Please update your theme to Version X 6.0.2

With regards to your product page, Change the code I provided above in your child theme’s functions.php with this

// 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' );
remove_theme_support( 'wc-product-gallery-lightbox' );
}
// =============================================================================

/*---Move Product Title*/
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
add_action( 'woocommerce_before_single_product_summary', 'woocommerce_template_single_title', 5 );

You still need to add this css

.woocommerce div.product .images {
    position: relative;
    float: none;
    width: 100%;
}

.woocommerce div.product .summary {
    float: none;
    clear: both;
    width: 100%;
    margin-top: 20px;
    display: block;
}

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks

#6

paul.r Staff,

I appreciate you taking the time to look into what I was asking about. I’m now going to keep using the default single product page layout and use the description differently so now the issue is just that I’d like to have the gallery thumbs placement below the main image with a padding of about 20px.

thank you thank you
Adam

#7

Hi there,

Then please add this CSS

.flex-control-nav.flex-control-thumbs {
    position: relative;
}

Hope this helps.

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.