Problème d'affichage – produits apparentés et produits associés

[Mathieu]

l’adresse qui commence par « test.liberon… » n’est pas accessible.

====================

[Arnaud P]

Ah oui effectivement, j’avais oublié que c’était du local. Je vous ai mis des screen en PJ.

====================

[Mathieu]

l’affichage se gère en HTML et CSS donc nous avons besoin d’accéder à la page complète pour vous aider.

====================

[Arnaud P]

Voici un lien qui illustre bien le problème: https://www.liberon.fr/produit/vernis-colle/

Selon moi, c’est lié aux classes des produits qui sont différentes selon l’affichage et engendrent des tailles d’images différentes.

 

 

====================

[Mathieu]

oui il y a une classe columns-4  qu’il suffit de modifier en « columns-3 » pour aligner les images.

est ce que le thème redéfinit les templates de WooCommerce avec un répertoire « woocommerce » ? si c’est le cas, c’est dans ces fichiers qu’il faudra regarder.

====================

[Arnaud P]

Effectivement, il le redéfini (voir PJ). Je suis en train de regarder si je peux trouver une solution.

====================

[Arnaud P]

Visiblement en enlevant 1% de margin à ce niveau cela fonctionne et cela n’a pas d’impact visuellement:

.woocommerce ul.products li.product,

.woocommerce-page ul.products li.product {

margin-top: 0;

margin-left: 0;

width: 32%;

margin-right: 1%;

text-align: center;

}

====================

[Mathieu]

j’ai fait une erreur de frappe dans mon message précédent, je voulais dire qu’il y a une classe columns-4 à modifier en « columns-3 ».
si vous trouvez le fichier qui génère cela, vous réglerez peut-être le problème plus efficacement parce qu’en modifiant le CSS, vous pouvez perturber l’effet responsif d’affichage des images en colonnes.

====================

[Arnaud P]

Cela doit être celui-ci mais je ne vois pas comment résoudre le problème.

====================

[Mathieu]

le fichiers template sont des fichiers PHP qui personnalisent des parties d’affichage de WooCommerce :
https://docs.woocommerce.com/document/template-structure/

====================

[Arnaud P]

Bonjour,

Après quelques recherches, je pense que l’erreur doit provenir de ce fichier (woocommerce/templates/single-product/product-image.php) ?

<?php
/**
* Single Product Image
*
* This template can be overridden by copying it to yourtheme/woocommerce/single-product/product-image.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* @see https://docs.woocommerce.com/document/template-structure/
* @author WooThemes
* @package WooCommerce/Templates
* @version 3.3.2
*/
defined( ‘ABSPATH’ ) || exit;
// Note: wc_get_gallery_image_html was added in WC 3.3.2 and did not exist prior. This check protects against theme overrides being used on older versions of WC.
if ( ! function_exists( ‘wc_get_gallery_image_html’ ) ) {
return;
}
global $product;
$columns = apply_filters( ‘woocommerce_product_thumbnails_columns’, 4 );
$post_thumbnail_id = $product->get_image_id();
$wrapper_classes = apply_filters( ‘woocommerce_single_product_image_gallery_classes’, array(
‘woocommerce-product-gallery’,
‘woocommerce-product-gallery–‘ . ( has_post_thumbnail() ? ‘with-images’ : ‘without-images’ ),
‘woocommerce-product-gallery–columns-‘ . absint( $columns ),
‘images’,
) );
?>

 » data-columns= »<?php echo esc_attr( $columns ); ?> » style= »opacity: 0; transition: opacity .25s ease-in-out; »>
<figure class= »woocommerce-product-gallery__wrapper »>
<?php
if ( has_post_thumbnail() ) {
$html = wc_get_gallery_image_html( $post_thumbnail_id, true );
} else {
$html = ‘

‘;
$html .= sprintf( ‘‘, esc_url( wc_placeholder_img_src() ), esc_html__( ‘Awaiting product image’, ‘woocommerce’ ) );
$html .= ‘

‘;
}
echo apply_filters( ‘woocommerce_single_product_image_thumbnail_html’, $html, $post_thumbnail_id );
do_action( ‘woocommerce_product_thumbnails’ );
?>
</figure>

====================

[Auteur]

Messages