- Ce sujet contient 11 réponses, 2 participants et a été mis à jour pour la dernière fois par
, le il y a 5 années et 7 mois.
-
Messages
-
Bonjour,
Sur la page des produits, avec l’affichage basique des produits apparentés, j’ai 3 produits qui s’affichent sur la même ligne. Or, quand je souhaite rajouter les “montée en gamme”, ceux-ci affichent uniquement 2 produits par ligne. Ce sont les mêmes images donc je ne comprends pas pourquoi l’affichage est différent.
Auriez-vous une idée de la manière dont je pourrais corriger ce problème ?
Vous pouvez voir la différence ici en comparant les 2:
https://www.liberon.fr/produit/patine-meuble-bois-le-patine/
https://test.liberon.fr/produit/peinture-le-metal-poudre/
Merci d’avance
l’adresse qui commence par “test.liberon…” n’est pas accessible.
Développeur PHP et WordPress En Alsace dans l'annuaire des prestataires WordPress et WooCommerce
🔶 Si vous appréciez mon aide, vous pouvez me faire un don de n'importe quel montant en cliquant ici.
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.
Développeur PHP et WordPress En Alsace dans l'annuaire des prestataires WordPress et WooCommerce
🔶 Si vous appréciez mon aide, vous pouvez me faire un don de n'importe quel montant en cliquant ici.
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.
Développeur PHP et WordPress En Alsace dans l'annuaire des prestataires WordPress et WooCommerce
🔶 Si vous appréciez mon aide, vous pouvez me faire un don de n'importe quel montant en cliquant ici.
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.Développeur PHP et WordPress En Alsace dans l'annuaire des prestataires WordPress et WooCommerce
🔶 Si vous appréciez mon aide, vous pouvez me faire un don de n'importe quel montant en cliquant ici.
le fichiers template sont des fichiers PHP qui personnalisent des parties d’affichage de WooCommerce :
https://docs.woocommerce.com/document/template-structure/Développeur PHP et WordPress En Alsace dans l'annuaire des prestataires WordPress et WooCommerce
🔶 Si vous appréciez mon aide, vous pouvez me faire un don de n'importe quel montant en cliquant ici.
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.
