- Ce sujet contient 11 réponses, 2 participants et a été mis à jour pour la dernière fois par
, le il y a 7 années.
-
Messages
-
l’adresse qui commence par « test.liberon… » n’est pas accessible.
====================
Ah oui effectivement, j’avais oublié que c’était du local. Je vous ai mis des screen en PJ.
====================
l’affichage se gère en HTML et CSS donc nous avons besoin d’accéder à la page complète pour vous aider.
====================
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.
====================
oui il y a une classe
columns-4qu’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.
====================
Effectivement, il le redéfini (voir PJ). Je suis en train de regarder si je peux trouver une solution.
====================
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;
}
====================
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.
Cela doit être celui-ci mais je ne vois pas comment résoudre le problème.
====================
le fichiers template sont des fichiers PHP qui personnalisent des parties d’affichage de WooCommerce :
====================
https://docs.woocommerce.com/document/template-structure/
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_htmlwas 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>
- Vous devez être connecté pour répondre à ce sujet.
