AnuragSaxena (Créer un compte)

• Accédez au Fichier functions.php de Votre Thème Enfant :
  • Allez dans votre tableau de bord WordPress.
  • Naviguez vers Apparence > Éditeur de thème.
  • Sélectionnez le fichier functions.php de votre thème enfant.
• Ajoutez le Code Suivant :

// Utiliser la miniature de la catégorie parente pour les sous-catégories
add_filter('woocommerce_subcategory_thumbnail_id', 'use_parent_category_thumbnail', 10, 2);

function use_parent_category_thumbnail($thumbnail_id, $category) {
    if (!$thumbnail_id) {
        $parent_id = $category->parent;
        if ($parent_id) {
            $thumbnail_id = get_term_meta($parent_id, 'thumbnail_id', true);
        }
    }
    return $thumbnail_id;
}

<h3>Utiliser un Plugin de Snippets</h3>

1. Installer et Activer un Plugin de Snippets :
   • Allez dans Extensions > Ajouter et recherchez « Code Snippets ».
   • Installez et activez le plugin.
2. Ajouter un Nouveau Snippet :
   • Allez dans Snippets > Ajouter Nouveau.
   • Donnez un titre à votre snippet, par exemple « Utiliser la miniature de la catégorie parente ».
   • Collez le code suivant dans la boîte de code :

add_filter('woocommerce_subcategory_thumbnail_id', 'use_parent_category_thumbnail', 10, 2);

function use_parent_category_thumbnail($thumbnail_id, $category) {
    if (!$thumbnail_id) {
        $parent_id = $category->parent;
        if ($parent_id) {
            $thumbnail_id = get_term_meta($parent_id, 'thumbnail_id', true);
        }
    }
    return $thumbnail_id;
}

3. Enregistrer et Activer le Snippet :
   • Enregistrez votre snippet et assurez-vous qu’il est activé.

<h3>Vérifier les Miniatures</h3>

1. Assurez-vous que les Catégories Parentales ont des Miniatures Définies :
   • Si une catégorie parente n’a pas de miniature définie, la sous-catégorie n’affichera pas d’image.
2. Vider le Cache :
   • Si vous utilisez un plugin de cache, videz le cache après avoir ajouté ce code pour vous assurer que les modifications prennent effet.

<h3>Conclusion</h3>
Ce code doit garantir que les sous-catégories utilisent les miniatures des catégories parentes. Si cela ne fonctionne toujours pas, veuillez fournir l’URL de votre site Web pour que je puisse examiner davantage.

Cordialement,<h3>URL de votre site web</h3>
Pourriez-vous également fournir l’URL de votre site web pour que je puisse vérifier directement ? Merci.

• Cette réponse a été modifiée le il y a 6 mois et 1 semaine par Joss47. Raison: J'ai enlevé les liens ou il fait sa pub

Bonjour,

Pour créer un carrousel de texte et d’image avec des boutons de navigation, comme celui que vous décrivez, il existe plusieurs plugins et widgets qui peuvent être utilisés avec Elementor. Voici quelques solutions que vous pouvez essayer :
<h3>Utiliser le Plugin « Premium Addons for Elementor »</h3>
Le plugin « Premium Addons for Elementor » propose un widget appelé « Content Slider » qui pourrait répondre à vos besoins. Voici comment l’utiliser :

1. Installer et Activer le Plugin :
   • Allez dans Extensions > Ajouter et recherchez « Premium Addons for Elementor ».
   • Installez et activez le plugin.
2. Utiliser le Widget « Content Slider » :
   • Allez dans l’éditeur Elementor de votre page.
   • Ajoutez une nouvelle section et recherchez le widget « Premium Content Slider ».
   • Ajoutez ce widget à votre section.
   • Configurez chaque slide avec du texte, des images et des boutons selon vos besoins.

<h3>Utiliser le Plugin « ElementsKit Lite »</h3>
Le plugin « ElementsKit Lite » propose également des widgets avancés pour créer des carrousels personnalisés.

1. Installer et Activer le Plugin :
   • Allez dans Extensions > Ajouter et recherchez « ElementsKit Lite ».
   • Installez et activez le plugin.
2. Utiliser le Widget de Carrousel :
   • Allez dans l’éditeur Elementor de votre page.
   • Ajoutez une nouvelle section et recherchez le widget de carrousel proposé par ElementsKit.
   • Configurez chaque slide avec du texte, des images et des boutons.

<h3>Utiliser le Widget « Slides » d’Elementor Pro</h3>
Elementor Pro offre un widget « Slides » qui peut être configuré pour afficher du texte, des images et des boutons.

1. Utiliser le Widget « Slides » :
   • Allez dans l’éditeur Elementor de votre page.
   • Ajoutez une nouvelle section et recherchez le widget « Slides ».
   • Ajoutez ce widget à votre section.
   • Ajoutez chaque slide et configurez le contenu avec du texte, des images et des boutons.

<h3>Exemple de Configuration d’un Carrousel avec du Code CSS (Facultatif)</h3>
Si vous souhaitez personnaliser davantage votre carrousel, vous pouvez ajouter du code CSS personnalisé.

/* Styliser le carrousel */
.carousel-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.carousel-slide img {
    max-width: 100%;
    height: auto;
}

.carousel-buttons {
    margin-top: 20px;
}

.carousel-buttons button {
    margin: 0 10px;
    padding: 10px 20px;
    background-color: #0073e6;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.carousel-buttons button:hover {
    background-color: #005bb5;
}

<div class= »flex flex-grow flex-col max-w-full »>
<div class= »min-h-[20px] text-message flex flex-col items-start whitespace-pre-wrap break-words [.text-message+&]:mt-5 juice:w-full juice:items-end overflow-x-auto gap-2″ dir= »auto » data-message-author-role= »assistant » data-message-id= »6cca560b-be8a-4e25-acbd-dd9b770358b9″>
<div class= »flex w-full flex-col gap-1 juice:empty:hidden juice:first:pt-[3px] »>
<div class= »markdown prose w-full break-words dark:prose-invert light »>

Ajoutez ce CSS dans Apparence > Personnaliser > CSS supplémentaire.
<h3>Conclusion</h3>
En utilisant ces plugins et widgets, vous devriez pouvoir créer un carrousel de texte et d’image comme celui que vous avez décrit. Si vous avez besoin d’une assistance supplémentaire, n’hésitez pas à me contacter.

Belle journée à vous.

Cordialement,

</div>
</div>
</div>
</div>

• Cette réponse a été modifiée le il y a 6 mois et 1 semaine par Joss47.

Bonjour,

Merci pour votre question. Il est tout à fait possible d’afficher une image différente pour les vignettes de produits sur la page boutique par rapport aux images des produits sur la page produit. Voici comment vous pouvez le faire avec WordPress et WooCommerce, en utilisant le thème OceanWP et des plugins.
<h3>Étapes pour Afficher des Images Différentes :</h3>
<h4>1. Utiliser un Plugin comme « WooThumbs »</h4>
« WooThumbs » est un plugin premium qui permet de gérer les galeries d’images de produits de manière avancée. Vous pouvez définir des images différentes pour les vignettes de la boutique et les pages de produits.

• Installation et configuration :
  1. Achetez et téléchargez le plugin « WooThumbs » depuis WooCommerce.
  2. Installez et activez le plugin.
  3. Allez dans les paramètres du plugin et configurez les images de vignettes pour la boutique et les images de produits séparément.

<h4>2. Utiliser des Fonctions PHP Personnalisées</h4>
Si vous préférez une solution sans plugin, vous pouvez ajouter du code personnalisé à votre thème pour changer l’image de la vignette de produit sur la page boutique.

• Code à ajouter dans le fichier functions.php de votre thème enfant :

<div class= »dark bg-gray-950 rounded-md border-[0.5px] border-token-border-medium »>
<div class= »flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md »>

// Changer l'image de la vignette du produit sur la page boutique
add_filter('woocommerce_product_get_image', 'custom_product_thumbnail', 10, 5);

function custom_product_thumbnail($image, $product, $size, $attr, $placeholder) {
    if (is_shop() || is_product_category() || is_product_tag()) {
        // ID de l'image spécifique pour la vignette
        $thumbnail_id = get_post_meta($product->get_id(), '_thumbnail_id_shop', true);
        if ($thumbnail_id) {
            $image = wp_get_attachment_image($thumbnail_id, $size, false, $attr);
        }
    }
    return $image;
}

// Ajouter un champ personnalisé pour l'image de la vignette de la boutique
add_action('add_meta_boxes', 'add_custom_meta_box');
function add_custom_meta_box() {
    add_meta_box('custom_meta_box', 'Image de la Vignette Boutique', 'custom_meta_box_callback', 'product', 'side', 'low');
}

function custom_meta_box_callback($post) {
    $thumbnail_id = get_post_meta($post->ID, '_thumbnail_id_shop', true);
    echo '<input type="hidden" id="thumbnail_id_shop" name="thumbnail_id_shop" value="' . esc_attr($thumbnail_id) . '">';
    echo '<img id="thumbnail_id_shop_preview" src="' . wp_get_attachment_url($thumbnail_id) . '" style="max-width:100%;"><br>';
    echo '<a href="#" id="set_thumbnail_id_shop">Définir l’image de la vignette boutique</a> | <a href="#" id="remove_thumbnail_id_shop">Supprimer</a>';
}

add_action('save_post', 'save_custom_meta_box');
function save_custom_meta_box($post_id) {
    if (isset($_POST['thumbnail_id_shop'])) {
        update_post_meta($post_id, '_thumbnail_id_shop', sanitize_text_field($_POST['thumbnail_id_shop']));
    }
}

add_action('admin_enqueue_scripts', 'enqueue_custom_admin_scripts');
function enqueue_custom_admin_scripts() {
    wp_enqueue_media();
    wp_enqueue_script('custom-admin-script', get_stylesheet_directory_uri() . '/custom-admin-script.js', array('jquery'), null, true);
}

</div>
</div>
Code JavaScript à ajouter dans un fichier custom-admin-script.js dans le répertoire de votre thème enfant :

jQuery(document).ready(function($) {
    $('#set_thumbnail_id_shop').click(function(e) {
        e.preventDefault();
        var frame = wp.media({
            title: 'Sélectionner l’image de la vignette boutique',
            button: {
                text: 'Utiliser cette image'
            },
            multiple: false
        });

        frame.on('select', function() {
            var attachment = frame.state().get('selection').first().toJSON();
            $('#thumbnail_id_shop').val(attachment.id);
            $('#thumbnail_id_shop_preview').attr('src', attachment.url);
        });

        frame.open();
    });

    $('#remove_thumbnail_id_shop').click(function(e) {
        e.preventDefault();
        $('#thumbnail_id_shop').val('');
        $('#thumbnail_id_shop_preview').attr('src', '');
    });
});

<div class= »flex flex-grow flex-col max-w-full »>
<div class= »min-h-[20px] text-message flex flex-col items-start whitespace-pre-wrap break-words [.text-message+&]:mt-5 juice:w-full juice:items-end overflow-x-auto gap-2″ dir= »auto » data-message-author-role= »assistant » data-message-id= »5bd7ab76-2741-4abe-82ab-ff255d08b82e »>
<div class= »flex w-full flex-col gap-1 juice:empty:hidden juice:first:pt-[3px] »>
<div class= »markdown prose w-full break-words dark:prose-invert light »>
<h3>Conclusion</h3>
Ces méthodes vous permettront d’afficher des images différentes pour les vignettes de produits sur la page boutique et les pages de produits. La première méthode utilise un plugin premium pour une gestion facile, tandis que la deuxième méthode nécessite l’ajout de code personnalisé pour une solution plus technique.

N’hésitez pas à me contacter si vous avez des questions supplémentaires ou des difficultés.

Cordialement,

</div>
</div>
</div>
</div>

• Cette réponse a été modifiée le il y a 6 mois et 1 semaine par Joss47.

Bonjour,

Ma configuration WP actuelle

• Version de PHP/MySQL :
• Thème utilisé : Tiny Framework
• Extensions en place : Ninja Forms, WP External links, WP Super Cache
• Nom de l’hébergeur : OVH
• Adresse du site : carn.be

Problème(s) rencontré(s) :

Bonjour,

La page « http://www.carn.be/ces-organismes-nous-ont-fait-confiance/ » de notre site internet affiche le contenu d’un fichier PDF qui contient des liens URL. Si on clique sur un de ces liens depuis la page de notre site, la page demandée s’ouvre dans l’onglet du site, ce qui est dérangeant. Pourtant le lien du fichier PDF (construit à partir de Libre Office) demande l’ouverture dans un nouvel onglet. Cela peut être vérifié en téléchargeant le PDF depuis la page en question, en ouvrant le PDF, puis en cliquant sur un lien URL quelconque. Est-il possible de résoudre cette incohérence ? Merci d’avance.
<h3>Solutions Proposées :</h3>

1. Vérifier les Paramètres du Plugin de Visionnage de PDF :
   • Consultez les paramètres du plugin que vous utilisez pour afficher le PDF sur votre site et vérifiez s’il existe une option pour ouvrir les liens dans un nouvel onglet.
2. Utiliser le Code JavaScript pour Forcer l’Ouverture dans un Nouvel Onglet :
   • Ajoutez le script JavaScript suivant à votre thème ou via un plugin de gestion de scripts comme « Code Snippets » :

   <div class= »dark bg-gray-950 rounded-md border-[0.5px] border-token-border-medium »>
   <div class= »flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md »>javascript
   <div class= »flex items-center »><span class= » » data-state= »closed »><button class= »flex gap-1 items-center »>Copy code</button></span></div>
   </div>
   <div class= »overflow-y-auto p-4″ dir= »ltr »><code class= »!whitespace-pre hljs language-javascript »><span class= »hljs-variable language_ »>document</span>.<span class= »hljs-title function_ »>addEventListener</span>(<span class= »hljs-string »> »DOMContentLoaded »</span>, <span class= »hljs-keyword »>function</span>() {
   <span class= »hljs-keyword »>const</span> pdfIframe = <span class= »hljs-variable language_ »>document</span>.<span class= »hljs-title function_ »>querySelector</span>(<span class= »hljs-string »>’iframe'</span>);
   <span class= »hljs-keyword »>if</span> (pdfIframe) {
   <span class= »hljs-keyword »>const</span> pdfDoc = pdfIframe.<span class= »hljs-property »>contentDocument</span> || pdfIframe.<span class= »hljs-property »>contentWindow</span>.<span class= »hljs-property »>document</span>;
   <span class= »hljs-keyword »>const</span> links = pdfDoc.<span class= »hljs-title function_ »>getElementsByTagName</span>(<span class= »hljs-string »>’a'</span>);
   <span class= »hljs-keyword »>for</span> (<span class= »hljs-keyword »>let</span> i = <span class= »hljs-number »>0</span>; i < links.<span class= »hljs-property »>length</span>; i++) {
   links[i].<span class= »hljs-title function_ »>setAttribute</span>(<span class= »hljs-string »>’target'</span>, <span class= »hljs-string »>’_blank'</span>);
   }
   }
   });
   </div>
   </div>

3. Modifier le PDF :
   • Assurez-vous que les liens dans votre PDF sont configurés pour s’ouvrir dans un nouvel onglet. Parfois, Libre Office peut ne pas refléter correctement ce comportement lorsqu’il est intégré sur une page web.
4. Utiliser une Extension WordPress :
   • Extensions telles que « PDF Embedder » ou « PDF Viewer for WordPress » peuvent offrir des options pour gérer le comportement des liens dans les PDF.
5. Vérifier le Thème :
   • Assurez-vous que votre thème (Tiny Framework) ne force pas les liens à s’ouvrir dans le même onglet. Testez avec un autre thème temporairement pour voir si le problème persiste.
6. Utiliser un Plugin de Gestion de Liens Externes :
   • Avec « WP External Links », vérifiez que les paramètres sont configurés pour ouvrir les liens externes dans un nouvel onglet.

<h3>Exemple de Configuration WP External Links :</h3>

1. Allez dans « Réglages » > « WP External Links ».
2. Configurez les options pour que les liens externes s’ouvrent dans un nouvel onglet (target="_blank").
3. Assurez-vous que les paramètres sont bien appliqués aux liens dans les PDFs intégrés.

Essayez ces solutions et voyez laquelle résout votre problème. Si le problème persiste, n’hésitez pas à me fournir plus de détails sur votre configuration et les extensions utilisées, et je serai heureux de vous aider davantage.

Cordialement,

• Cette réponse a été modifiée le il y a 6 mois et 1 semaine par Joss47.