I have used some custom code and have still not been able to make the images go full-width or appear in the centre of the page or bigger. Please take a look at the link below:
I want the image to be bigger and be in the centre rather than to the left.
Also in responsive the image seems to be cropped and only part of the image is visible, does anyone know a fix? thanks.
Hi There,
Please add the following CSS under Customizer > Custom > Global CSS:
.woocommerce div.product .images {
width: 100%;
}
Please create this file in your child theme directory: x-child/woocommerce/single-product/product-image.php with the following code:
<?php
// =============================================================================
// WOOCOMMERCE/SINGLE-PRODUCT/PRODUCT-IMAGE.PHP
// -----------------------------------------------------------------------------
// @version 3.0.2
// =============================================================================
// Template Changes
// ----------------
// 01. Add product sale flash.
// 02. Add classes to linked image (.x-img, .x-img-link, .x-img-thumbnail,
// and .man).
// 03. Add classes to image (.x-img, .x-img-thumbnail and .man) and update text
// domain.
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
global $post, $product;
$columns = apply_filters( 'woocommerce_product_thumbnails_columns', 4 );
$post_thumbnail_id = get_post_thumbnail_id( $post->ID );
$full_size_image = wp_get_attachment_image_src( $post_thumbnail_id, 'full' );
$image_title = get_post_field( 'post_excerpt', $post_thumbnail_id );
$placeholder = has_post_thumbnail() ? 'with-images' : 'without-images';
$wrapper_classes = apply_filters( 'woocommerce_single_product_image_gallery_classes', array(
'woocommerce-product-gallery',
'woocommerce-product-gallery--' . $placeholder,
'woocommerce-product-gallery--columns-' . absint( $columns ),
'images',
) );
?>
<div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', $wrapper_classes ) ) ); ?>" data-columns="<?php echo esc_attr( $columns ); ?>" style="opacity: 0; transition: opacity .25s ease-in-out;">
<?php woocommerce_show_product_sale_flash(); // 01 ?>
<figure class="woocommerce-product-gallery__wrapper">
<?php
$attributes = array(
'title' => $image_title,
'data-src' => $full_size_image[0],
'data-large_image' => $full_size_image[0],
'data-large_image_width' => $full_size_image[1],
'data-large_image_height' => $full_size_image[2],
);
if ( has_post_thumbnail() ) {
$html = '<div data-thumb="' . get_the_post_thumbnail_url( $post->ID, 'full' ) . '" class="woocommerce-product-gallery__image"><a href="' . esc_url( $full_size_image[0] ) . '" class="x-img x-img-link x-img-thumbnail man">'; // 02
$html .= get_the_post_thumbnail( $post->ID, 'full', $attributes );
$html .= '</a></div>';
} else {
$html = '<div class="woocommerce-product-gallery__image--placeholder">';
$html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image x-img x-img-thumbnail man" />', esc_url( wc_placeholder_img_src() ), esc_html__( 'Awaiting product image', '__x__' ) ); // 03
$html .= '</div>';
}
echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', $html, get_post_thumbnail_id( $post->ID ) );
do_action( 'woocommerce_product_thumbnails' );
?>
</figure>
</div>
Hi there, I have added the code and the file, the first image is now 100% width but it doesn’t seem to be responsive and the first image has a strange border around it? Also the other images seem to stick to the left, thanks.
Hi there,
Please add this code as well:
.single-product .product a.x-img {
padding: 0;
border: 0;
}
Hope this helps.
Hi Jade,
This has worked and there is no border however, the slides after the first one are sticking to the left for some reason, is there a fix for this?
Thanks
Still Awaiting Support on posts.
Hi There,
Please also add this CSS:
.woocommerce-product-gallery__image {
text-align: center;
}