feat: Added more option to handle subcategories

category-grid-widget-for-elementor.php

@@ -0,0 +1,230 @@
+<?php
+/**
+ * Plugin Name:     Category Grid Widget for Elementor
+ * Plugin URI:      https://git.mrraph.fr/WordPress/elementor-category-grid-widget-for-elementor
+ * Description:     Responsive article category grid with image for Elementor.
+ * Version:         1.3.0
+ * Author:          MrRaph_
+ * Author URI:      https://mrraph.photo
+ * Requires at least: 5.8
+ * Requires PHP:      7.0
+ * Text Domain: category-grid-widget-for-elementor
+ * Requires Plugins: elementor
+ * License:           GPLv2 or later
+ * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
+ */
+
+
+if (!defined('ABSPATH')) {
+    exit; // Sécurité : empêche l'accès direct.
+}
+
+/**
+ * Charger les scripts Media Uploader et localiser les données JS
+ * sur les écrans d'ajout ET d'édition de catégorie.
+ */
+function ccgw_enqueue_media_uploader($hook_suffix)
+{
+    // phpcs:disable WordPress.Security.NonceVerification.Recommended
+    $taxonomy = filter_input( INPUT_GET, 'taxonomy', FILTER_SANITIZE_STRING );
+    $taxonomy = sanitize_key( (string) $taxonomy );
+    // phpcs:enable WordPress.Security.NonceVerification.Recommended
+
+    if ( ! in_array( $hook_suffix, [ 'edit-tags.php', 'term.php' ], true ) ) {
+        return;
+    }
+    if ( 'category' !== $taxonomy ) {
+        return;
+    }
+
+    // Charge la librairie media de WP
+    wp_enqueue_media();
+
+    // Ton script JS
+    wp_enqueue_script(
+        'ccgw-category-image',
+        plugin_dir_url(__FILE__) . 'admin/js/category-image.js',
+        ['jquery'],
+        '1.3.0',
+        true
+    );
+
+    // Variable JS
+    wp_localize_script(
+        'ccgw-category-image',
+        'ccgw_data',
+        [
+            'title' => esc_js(__('Sélectionner une image de catégorie', 'category-grid-widget-for-elementor')),
+            'button' => esc_js(__('Sélectionner', 'category-grid-widget-for-elementor')),
+        ]
+    );
+}
+add_action('admin_enqueue_scripts', 'ccgw_enqueue_media_uploader');
+
+// 1) Déclarez la colonne "Image" dans le tableau des catégories
+add_filter('manage_edit-category_columns', function ($columns) {
+    $new = [];
+    foreach ($columns as $key => $label) {
+        $new[$key] = $label;
+        if ('name' === $key) {
+            // après la colonne "Nom", on insère notre colonne "Image"
+            $new['category_image'] = esc_html__('Image', 'category-grid-widget-for-elementor');
+        }
+    }
+    return $new;
+});
+
+// 2) Remplissez la colonne "Image"  
+add_filter('manage_category_custom_column', function ($out, $column, $term_id) {
+    if ('category_image' === $column) {
+        $thumb_id = get_term_meta($term_id, 'thumbnail_id', true);
+        if ($thumb_id) {
+            // Affiche la version 'thumbnail' de l'image
+            return wp_get_attachment_image($thumb_id, 'thumbnail', false, [
+                'style' => 'max-width:60px;height:auto;'
+            ]);
+        }
+    }
+    return $out;
+}, 10, 3);
+
+// 3) Un peu de CSS pour la largeur de colonne et la mise en forme
+add_action('admin_head-edit-tags.php', function () {
+    echo '<style>
+      .fixed .column-category_image { width: 80px; }
+      .column-category_image img { display: block; margin: 4px auto; }
+    </style>';
+});
+
+/**
+ * Affiche le champ d'upload dans le formulaire de création de catégorie.
+ */
+function ccgw_category_image_field($taxonomy)
+{ ?>
+    <div class="form-field term-group">
+        <label
+            for="category-image-id"><?php esc_html_e('Image de la catégorie', 'category-grid-widget-for-elementor'); ?></label>
+        <input type="hidden" id="category-image-id" name="category-image-id" value="">
+        <div id="category-image-wrapper"></div>
+        <p>
+            <button type="button"
+                class="button button-secondary ccgw-upload-image"><?php esc_html_e('Choisir une image', 'category-grid-widget-for-elementor'); ?></button>
+            <button type="button"
+                class="button button-secondary ccgw-remove-image"><?php esc_html_e('Supprimer l’image', 'category-grid-widget-for-elementor'); ?></button>
+        </p>
+        <?php wp_nonce_field('ccgw_save_category_image', 'ccgw_category_image_nonce'); ?>
+    </div>
+<?php }
+add_action('category_add_form_fields', 'ccgw_category_image_field', 10, 2);
+
+/**
+ * Affiche le champ d'upload dans le formulaire d'édition de catégorie.
+ */
+function ccgw_category_image_field_edit($term, $taxonomy)
+{
+    $image_id = get_term_meta($term->term_id, 'thumbnail_id', true);
+    $image_url = $image_id ? wp_get_attachment_thumb_url($image_id) : '';
+    ?>
+    <tr class="form-field term-group-wrap">
+        <th scope="row">
+            <label
+                for="category-image-id"><?php esc_html_e('Image de la catégorie', 'category-grid-widget-for-elementor'); ?></label>
+        </th>
+        <td>
+            <input type="hidden" id="category-image-id" name="category-image-id" value="<?php echo esc_attr($image_id); ?>">
+            <div id="category-image-wrapper">
+                <?php if ($image_url): ?>
+                    <?php
+                    echo wp_get_attachment_image(
+                        $image_id,
+                        'thumbnail',
+                        false,
+                        ['style' => 'max-width:60px;height:auto;']
+                    );
+                    ?>
+                <?php endif; ?>
+            </div>
+            <p>
+                <button type="button"
+                    class="button button-secondary ccgw-upload-image"><?php esc_html_e('Choisir une image', 'category-grid-widget-for-elementor'); ?></button>
+                <button type="button"
+                    class="button button-secondary ccgw-remove-image"><?php esc_html_e('Supprimer l’image', 'category-grid-widget-for-elementor'); ?></button>
+            </p>
+        </td>
+        <?php wp_nonce_field('ccgw_save_category_image', 'ccgw_category_image_nonce'); ?>
+    </tr>
+<?php }
+add_action('category_edit_form_fields', 'ccgw_category_image_field_edit', 10, 2);
+
+/**
+ * Sauvegarde le term meta 'thumbnail_id' pour la catégorie,
+ * en vérifiant le nonce et en sanitisant adéquatement.
+ */
+function ccgw_save_category_image($term_id)
+{
+    $nonce = isset( $_POST['ccgw_category_image_nonce'] )
+    ? sanitize_text_field( wp_unslash( $_POST['ccgw_category_image_nonce'] ))
+    : '';
+    // $nonce = sanitize_text_field( $raw_nonce );
+
+    // 1) Vérifier la présence du nonce
+    if (empty($nonce)) {
+        return;
+    }
+
+    // 2) Vérifier le nonce
+    if (!wp_verify_nonce($nonce, 'ccgw_save_category_image')) {
+        return;
+    }
+
+    // 3) Vérifier la capacité de l’utilisateur
+    if (!current_user_can('manage_categories')) {
+        return;
+    }
+
+    // 4) Récupérer et sanitiszer l’ID d’image
+    if (isset($_POST['category-image-id'])) {
+        $image_id = intval(wp_unslash($_POST['category-image-id']));
+        if ($image_id) {
+            update_term_meta($term_id, 'thumbnail_id', $image_id);
+        } else {
+            delete_term_meta($term_id, 'thumbnail_id');
+        }
+    }
+}
+add_action('created_category', 'ccgw_save_category_image', 10, 2);
+add_action('edited_category', 'ccgw_save_category_image', 10, 2);
+
+/**
+ * Enregistrer le widget "Grille de Catégories" pour Elementor.
+ *
+ * Inclut le fichier de la classe du widget et enregistre le widget auprès du manager d'Elementor.
+ *
+ * @param \Elementor\Widgets_Manager $widgets_manager Le gestionnaire de widgets d'Elementor.
+ */
+function register_category_grid_widget($widgets_manager)
+{
+    // Inclure le fichier de la classe du widget.
+    require_once __DIR__ . '/widgets/category-grid-widget.php';
+
+    // Enregistrer la classe du widget auprès d'Elementor.
+    $widgets_manager->register(new \Elementor_Category_Grid_Widget());
+}
+add_action('elementor/widgets/register', 'register_category_grid_widget');
+
+/**
+ * Enqueue styles front-end pour le widget.
+ */
+function ccgw_enqueue_front_styles()
+{
+    // Ne charger que si Elementor est actif
+    if (defined('ELEMENTOR_VERSION')) {
+        wp_enqueue_style(
+            'ccgw-category-grid-style',
+            plugin_dir_url(__FILE__) . 'css/style.css',
+            [],
+            '1.3.0'
+        );
+    }
+}
+add_action('wp_enqueue_scripts', 'ccgw_enqueue_front_styles');

css/style.css

@@ -1,11 +1,20 @@
 /* css/style.css */
+.elementor-category-grid .category-card {
+  position: relative;
+  overflow: hidden;
+}
+
+/* pseudo-élément overlay */
+.elementor-category-grid .category-card::before {
+  content: "";
+  position: absolute;
+  top: 0; right: 0; bottom: 0; left: 0;
+  background-color: transparent;
+  transition: opacity .3s ease;
+  pointer-events: none; /* laisse passer le clic */
+}
 
 /* 1) Mise en place de la grille */
-/* .elementor-category-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 1rem;
-} */
 .elementor-category-grid {
   display: grid;
   gap: 1rem;
@@ -25,7 +34,7 @@
   overflow: hidden;
   height: 0;
   padding-bottom: 40%; /* ratio 5:2 – ajustez selon vos images */
-  border-radius: 8px;
+  /* border-radius: 8px; */
 }
 
 /* 3) Image pleine carte */

elementor-category-grid-widget.php

@@ -1,179 +0,0 @@
-<?php
-/**
- * Plugin Name: Elementor Category Grid Widget
- * Description: Custom Elementor widget to display a grid of post categories with images.
- * Version:     1.2.0
- * Author:      MrRaph_
- * Text Domain: category-grid-widget
- * Requires Plugins: elementor
- * Elementor tested up to: 3.25.0
- * Elementor Pro tested up to: 3.25.0
- */
-
-if ( ! defined( 'ABSPATH' ) ) {
-    exit; // Sécurité : empêche l'accès direct.
-}
-
-/**
- * Charger les scripts Media Uploader et localiser les données JS
- * sur les écrans d'ajout ET d'édition de catégorie.
- */
-function ccgw_enqueue_media_uploader( $hook_suffix ) {
-    // On ne charge que sur edit-tags.php (création) OU term.php (édition)
-    if ( ! in_array( $hook_suffix, [ 'edit-tags.php', 'term.php' ], true ) ) {
-        return;
-    }
-    // Et seulement pour la taxonomie 'category'
-    if ( empty( $_GET['taxonomy'] ) || 'category' !== $_GET['taxonomy'] ) {
-        return;
-    }
-
-    // Charge la librairie media de WP
-    wp_enqueue_media();
-
-    // Ton script JS
-    wp_enqueue_script(
-        'ccgw-category-image',
-        plugin_dir_url( __FILE__ ) . 'admin/js/category-image.js',
-        [ 'jquery' ],
-        '1.2.0',
-        true
-    );
-
-    // Variable JS
-    wp_localize_script(
-        'ccgw-category-image',
-        'ccgw_data',
-        [
-            'title'  => esc_js( __( 'Sélectionner une image de catégorie', 'category-grid-widget' ) ),
-            'button' => esc_js( __( 'Sélectionner',                  'category-grid-widget' ) ),
-        ]
-    );
-}
-add_action( 'admin_enqueue_scripts', 'ccgw_enqueue_media_uploader' );
-
-// 1) Déclarez la colonne "Image" dans le tableau des catégories
-add_filter( 'manage_edit-category_columns', function( $columns ) {
-    $new = [];
-    foreach ( $columns as $key => $label ) {
-        $new[ $key ] = $label;
-        if ( 'name' === $key ) {
-            // après la colonne "Nom", on insère notre colonne "Image"
-            $new['category_image'] = esc_html__( 'Image', 'category-grid-widget' );
-        }
-    }
-    return $new;
-} );
-
-// 2) Remplissez la colonne "Image"  
-add_filter( 'manage_category_custom_column', function( $out, $column, $term_id ) {
-    if ( 'category_image' === $column ) {
-        $thumb_id = get_term_meta( $term_id, 'thumbnail_id', true );
-        if ( $thumb_id ) {
-            // Affiche la version 'thumbnail' de l'image
-            return wp_get_attachment_image( $thumb_id, 'thumbnail', false, [
-                'style' => 'max-width:60px;height:auto;'
-            ] );
-        }
-    }
-    return $out;
-}, 10, 3 );
-
-// 3) Un peu de CSS pour la largeur de colonne et la mise en forme
-add_action( 'admin_head-edit-tags.php', function() {
-    echo '<style>
-      .fixed .column-category_image { width: 80px; }
-      .column-category_image img { display: block; margin: 4px auto; }
-    </style>';
-} );
-
-/**
- * Affiche le champ d'upload dans le formulaire de création de catégorie.
- */
-function ccgw_category_image_field( $taxonomy ) { ?>
-    <div class="form-field term-group">
-        <label for="category-image-id"><?php esc_html_e( 'Image de la catégorie', 'category-grid-widget' ); ?></label>
-        <input type="hidden" id="category-image-id" name="category-image-id" value="">
-        <div id="category-image-wrapper"></div>
-        <p>
-            <button type="button" class="button button-secondary ccgw-upload-image"><?php esc_html_e( 'Choisir une image', 'category-grid-widget' ); ?></button>
-            <button type="button" class="button button-secondary ccgw-remove-image"><?php esc_html_e( 'Supprimer l’image', 'category-grid-widget' ); ?></button>
-        </p>
-    </div>
-<?php }
-add_action( 'category_add_form_fields', 'ccgw_category_image_field', 10, 2 );
-
-/**
- * Affiche le champ d'upload dans le formulaire d'édition de catégorie.
- */
-function ccgw_category_image_field_edit( $term, $taxonomy ) {
-    $image_id = get_term_meta( $term->term_id, 'thumbnail_id', true );
-    $image_url = $image_id ? wp_get_attachment_thumb_url( $image_id ) : '';
-    ?>
-    <tr class="form-field term-group-wrap">
-        <th scope="row">
-            <label for="category-image-id"><?php esc_html_e( 'Image de la catégorie', 'category-grid-widget' ); ?></label>
-        </th>
-        <td>
-            <input type="hidden" id="category-image-id" name="category-image-id" value="<?php echo esc_attr( $image_id ); ?>">
-            <div id="category-image-wrapper">
-                <?php if ( $image_url ) : ?>
-                    <img src="<?php echo esc_url( $image_url ); ?>" style="max-width:100px; height:auto;">
-                <?php endif; ?>
-            </div>
-            <p>
-                <button type="button" class="button button-secondary ccgw-upload-image"><?php esc_html_e( 'Choisir une image', 'category-grid-widget' ); ?></button>
-                <button type="button" class="button button-secondary ccgw-remove-image"><?php esc_html_e( 'Supprimer l’image', 'category-grid-widget' ); ?></button>
-            </p>
-        </td>
-    </tr>
-<?php }
-add_action( 'category_edit_form_fields', 'ccgw_category_image_field_edit', 10, 2 );
-
-/**
- * Sauvegarde le term meta 'thumbnail_id' pour la catégorie.
- */
-function ccgw_save_category_image( $term_id ) {
-    if ( isset( $_POST['category-image-id'] ) ) {
-        $image_id = intval( $_POST['category-image-id'] );
-        if ( $image_id ) {
-            update_term_meta( $term_id, 'thumbnail_id', $image_id );
-        } else {
-            delete_term_meta( $term_id, 'thumbnail_id' );
-        }
-    }
-}
-add_action( 'created_category', 'ccgw_save_category_image', 10, 2 );
-add_action( 'edited_category',  'ccgw_save_category_image', 10, 2 );
-
-/**
- * Enregistrer le widget "Grille de Catégories" pour Elementor.
- *
- * Inclut le fichier de la classe du widget et enregistre le widget auprès du manager d'Elementor.
- *
- * @param \Elementor\Widgets_Manager $widgets_manager Le gestionnaire de widgets d'Elementor.
- */
-function register_category_grid_widget( $widgets_manager ) {
-    // Inclure le fichier de la classe du widget.
-    require_once __DIR__ . '/widgets/category-grid-widget.php';
-
-    // Enregistrer la classe du widget auprès d'Elementor.
-    $widgets_manager->register( new \Elementor_Category_Grid_Widget() );
-}
-add_action( 'elementor/widgets/register', 'register_category_grid_widget' );
-
-/**
- * Enqueue styles front-end pour le widget.
- */
-function ccgw_enqueue_front_styles() {
-    // Ne charger que si Elementor est actif
-    if ( defined( 'ELEMENTOR_VERSION' ) ) {
-        wp_enqueue_style(
-            'ccgw-category-grid-style',
-            plugin_dir_url( __FILE__ ) . 'css/style.css',
-            [],
-            '1.2.0'
-        );
-    }
-}
-add_action( 'wp_enqueue_scripts', 'ccgw_enqueue_front_styles' );

readme.txt

@@ -0,0 +1,57 @@
+=== Category Grid Widget for Elementor ===
+Contributors: mrraph
+Donate link: https://your-site.example/donate
+Tags: elementor, category, grid, widget, posts
+Requires at least: 5.8
+Tested up to: 6.8
+Requires PHP: 7.0
+Stable tag: 1.3.0
+License: GPLv2 or later
+License URI: https://www.gnu.org/licenses/gpl-2.0.html
+Responsive grid of post categories with images for Elementor.
+
+== Description ==
+**Category Grid Widget for Elementor** adds a simple yet powerful widget to Elementor for displaying your post categories in a grid:
+- Manual selection of categories to display
+- Option to show subcategories
+- Option to hide categories without an image
+- Configurable number of columns (1–6)
+- Choice of image size (thumbnail, medium, large, full)
+- **Style** tab: spacing, card background & border, typography, shadow
+- **Hover** tab: customizable overlay (color & opacity), title color on hover
+- Each card is clickable and links to the category archive page
+
+The widget uses WordPress’s native category image feature (a “Category Image” field added in the admin).
+
+== Installation ==
+1. Upload the `elementor-category-grid-widget-for-elementor` folder to `/wp-content/plugins/`.
+2. Activate **Category Grid Widget for Elementor** in the **Plugins** menu.
+3. In Elementor, add the **Category Grid** widget to your layout.
+4. Configure: select categories, columns, style, and hover effects.
+
+== Screenshots ==
+1. Elementor editor: widget settings panel  
+2. 4-column grid with hover overlay  
+3. Mobile: responsive single column  
+4. Advanced options in the Style tab  
+
+== Frequently Asked Questions ==
+= How do I assign an image to a category? =
+When creating or editing a category, a “Category Image” field appears in the admin. Click “Select Image” to set it.
+
+= Can I hide categories without an image? =
+Yes, enable the **“Hide categories without image”** option in the widget’s Content tab.
+
+= How do I customize the hover effect? =
+Open the **Style » Hover** tab: choose the overlay color & opacity, and the title color on hover.
+
+== Changelog ==
+= 1.3.0 =
+* Added more option to handle subcategories
+
+= 1.2.1 =
+* Initial release  
+* Manual category and subcategory selection  
+* Configurable number of columns and image size  
+* Option to hide categories without image  
+* Added Style and Hover tabs for advanced customization  

widgets/category-grid-widget.php

@@ -3,6 +3,10 @@ if (!defined('ABSPATH')) {
     exit; // Empêche l'accès direct.
 }
 
+use Elementor\Controls_Manager;
+use Elementor\Group_Control_Typography;
+use Elementor\Group_Control_Box_Shadow;
+
 /**
  * Classe Elementor_Category_Grid_Widget.
  *
@@ -29,7 +33,7 @@ class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base
      */
     public function get_title(): string
     {
-        return esc_html__('Grille de Catégories', 'category-grid-widget');
+        return esc_html__('Grille de Catégories', 'category-grid-widget-for-elementor');
     }
 
     /**
@@ -61,6 +65,205 @@ class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base
     {
         return ['category', 'catégorie', 'grid', 'grille'];
     }
+    protected function register_style_controls()
+    {
+        // 1) Styles de la grille (espacement)
+        $this->start_controls_section(
+            'section_style_grid',
+            [
+                'label' => esc_html__('Grille', 'category-grid-widget-for-elementor'),
+                'tab' => Controls_Manager::TAB_STYLE,
+            ]
+        );
+        $this->add_responsive_control(
+            'grid_gap',
+            [
+                'label' => esc_html__('Espacement (gap)', 'category-grid-widget-for-elementor'),
+                'type' => Controls_Manager::SLIDER,
+                'size_units' => ['px', 'em', '%'],
+                'range' => [
+                    'px' => ['min' => 0, 'max' => 100],
+                    'em' => ['min' => 0, 'max' => 10],
+                ],
+                'selectors' => [
+                    '{{WRAPPER}} .elementor-category-grid' => 'gap: {{SIZE}}{{UNIT}};',
+                ],
+            ]
+        );
+        $this->end_controls_section();
+
+        // 2) Styles des cartes (fond, bordure, ombre)
+        $this->start_controls_section(
+            'section_style_card',
+            [
+                'label' => esc_html__('Carte', 'category-grid-widget-for-elementor'),
+                'tab' => Controls_Manager::TAB_STYLE,
+            ]
+        );
+        $this->add_control(
+            'card_bg_color',
+            [
+                'label' => esc_html__('Fond de la carte', 'category-grid-widget-for-elementor'),
+                'type' => Controls_Manager::COLOR,
+                'default' => '',
+                'selectors' => [
+                    '{{WRAPPER}} .category-card' => 'background-color: {{VALUE}};',
+                ],
+            ]
+        );
+        $this->add_group_control(
+            Group_Control_Typography::get_type(),
+            [
+                'name' => 'card_title_typography',
+                'label' => esc_html__('Typographie du titre', 'category-grid-widget-for-elementor'),
+                'selector' => '{{WRAPPER}} .category-card-name',
+            ]
+        );
+        $this->add_control(
+            'card_border_radius',
+            [
+                'label' => esc_html__('Border radius', 'category-grid-widget-for-elementor'),
+                'type' => Controls_Manager::DIMENSIONS,
+                'size_units' => ['px', '%'],
+                'selectors' => [
+                    '{{WRAPPER}} .category-card' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
+                ],
+            ]
+        );
+        $this->add_group_control(
+            \Elementor\Group_Control_Box_Shadow::get_type(),
+            [
+                'name' => 'card_box_shadow',
+                'label' => esc_html__('Ombre de la carte', 'category-grid-widget-for-elementor'),
+                'selector' => '{{WRAPPER}} .category-card',
+            ]
+        );
+        $this->end_controls_section();
+
+        // 3) Styles du titre (couleur, arrière-plan du badge)
+        $this->start_controls_section(
+            'section_style_title',
+            [
+                'label' => esc_html__('Titre', 'category-grid-widget-for-elementor'),
+                'tab' => Controls_Manager::TAB_STYLE,
+            ]
+        );
+
+        // 3.1) Switcher pour désactiver le fond
+        $this->add_control(
+            'disable_title_bg',
+            [
+                'label' => esc_html__('Désactiver le fond du titre', 'category-grid-widget-for-elementor'),
+                'type' => Controls_Manager::SWITCHER,
+                'label_on' => esc_html__('Oui', 'category-grid-widget-for-elementor'),
+                'label_off' => esc_html__('Non', 'category-grid-widget-for-elementor'),
+                'return_value' => 'yes',
+                'default' => 'no',
+                'selectors' => [
+                    // Quand activé => on rend le fond totalement transparent
+                    '{{WRAPPER}} .category-card-name' => 'background-color: transparent !important;',
+                ],
+            ]
+        );
+
+        // 3.2) Couleur du texte
+        $this->add_control(
+            'title_text_color',
+            [
+                'label' => esc_html__('Couleur du texte', 'category-grid-widget-for-elementor'),
+                'type' => Controls_Manager::COLOR,
+                'default' => '#ffffff',
+                'selectors' => [
+                    '{{WRAPPER}} .category-card-name' => 'color: {{VALUE}};',
+                ],
+            ]
+        );
+
+        // 3.3) Couleur de fond du titre, **uniquement si** le fond n'est pas désactivé
+        $this->add_control(
+            'title_bg_color',
+            [
+                'label' => esc_html__('Fond du titre', 'category-grid-widget-for-elementor'),
+                'type' => Controls_Manager::COLOR,
+                'default' => 'rgba(0,0,0,0.4)',
+                'selectors' => [
+                    '{{WRAPPER}} .category-card-name' => 'background-color: {{VALUE}};',
+                ],
+                'condition' => [
+                    // n'affiche ce picker que si disable_title_bg != 'yes'
+                    'disable_title_bg!' => 'yes',
+                ],
+            ]
+        );
+
+        // 3.4) Typographie du titre
+        $this->add_group_control(
+            Group_Control_Typography::get_type(),
+            [
+                'name' => 'card_title_typography',
+                'label' => esc_html__('Typographie du titre', 'category-grid-widget-for-elementor'),
+                'selector' => '{{WRAPPER}} .category-card-name',
+            ]
+        );
+
+        $this->end_controls_section();
+
+        // 4) Section Hover
+        $this->start_controls_section(
+            'section_style_hover',
+            [
+                'label' => esc_html__('Hover', 'category-grid-widget-for-elementor'),
+                'tab' => Controls_Manager::TAB_STYLE,
+            ]
+        );
+
+        // 4.1) Couleur de l'overlay
+        $this->add_control(
+            'hover_overlay_color',
+            [
+                'label' => esc_html__('Couleur de l’overlay', 'category-grid-widget-for-elementor'),
+                'type' => Controls_Manager::COLOR,
+                'default' => 'rgba(0,0,0,0.3)',
+                'selectors' => [
+                    // sur l’élément ::before (défini en CSS ci-dessous)
+                    '{{WRAPPER}} .category-card::before' => 'background-color: {{VALUE}};',
+                ],
+            ]
+        );
+
+        // 4.2) Opacité de l'overlay
+        $this->add_control(
+            'hover_overlay_opacity',
+            [
+                'label' => esc_html__('Opacité de l’overlay', 'category-grid-widget-for-elementor'),
+                'type' => Controls_Manager::SLIDER,
+                'size_units' => ['%'],
+                'range' => [
+                    '%' => ['min' => 0, 'max' => 100],
+                ],
+                'default' => ['size' => 30],
+                'selectors' => [
+                    '{{WRAPPER}} .category-card::before' => 'opacity: 0;',
+                    '{{WRAPPER}} .category-card:hover::before' => 'opacity: {{SIZE}}%;',
+                ],
+            ]
+        );
+
+        // 4.3) Couleur du titre au hover
+        $this->add_control(
+            'title_hover_color',
+            [
+                'label' => esc_html__('Couleur du titre au hover', 'category-grid-widget-for-elementor'),
+                'type' => Controls_Manager::COLOR,
+                'default' => '#ffffff',
+                'selectors' => [
+                    '{{WRAPPER}} .category-card:hover .category-card-name' => 'color: {{VALUE}};',
+                ],
+            ]
+        );
+
+        $this->end_controls_section();
+    }
 
     /**
      * Enregistrer les contrôles du widget (champs configurables dans Elementor).
@@ -71,7 +274,7 @@ class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base
         $this->start_controls_section(
             'section_content',
             [
-                'label' => esc_html__('Catégories', 'category-grid-widget'),
+                'label' => esc_html__('Catégories', 'category-grid-widget-for-elementor'),
                 'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
             ]
         );
@@ -85,12 +288,12 @@ class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base
         $this->add_control(
             'categories',
             [
-                'label' => esc_html__('Catégories à afficher', 'category-grid-widget'),
+                'label' => esc_html__('Catégories à afficher', 'category-grid-widget-for-elementor'),
                 'type' => \Elementor\Controls_Manager::SELECT2,
                 'multiple' => true,
                 'label_block' => true,
                 'options' => $options,
-                'description' => esc_html__('Sélectionnez les catégories d’articles à afficher.', 'category-grid-widget'),
+                'description' => esc_html__('Sélectionnez les catégories d’articles à afficher.', 'category-grid-widget-for-elementor'),
             ]
         );
 
@@ -98,13 +301,40 @@ class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base
         $this->add_control(
             'show_subcategories',
             [
-                'label' => esc_html__('Afficher les sous-catégories', 'category-grid-widget'),
+                'label' => esc_html__('Afficher les sous-catégories', 'category-grid-widget-for-elementor'),
                 'type' => \Elementor\Controls_Manager::SWITCHER,
-                'label_on' => esc_html__('Oui', 'category-grid-widget'),
-                'label_off' => esc_html__('Non', 'category-grid-widget'),
+                'label_on' => esc_html__('Oui', 'category-grid-widget-for-elementor'),
+                'label_off' => esc_html__('Non', 'category-grid-widget-for-elementor'),
                 'return_value' => 'yes',
                 'default' => 'yes',
-                'description' => esc_html__('Inclure aussi les sous-catégories des catégories sélectionnées.', 'category-grid-widget'),
+                'description' => esc_html__('Inclure aussi les sous-catégories des catégories sélectionnées.', 'category-grid-widget-for-elementor'),
+            ]
+        );
+
+        $this->add_control(
+            'only_subcats_of_selected',
+            [
+                'label' => esc_html__('Afficher seulement les sous-catégories des catégories sélectionnées', 'category-grid-widget-for-elementor'),
+                'type' => \Elementor\Controls_Manager::SWITCHER,
+                'label_on' => esc_html__('Oui', 'category-grid-widget-for-elementor'),
+                'label_off' => esc_html__('Non', 'category-grid-widget-for-elementor'),
+                'return_value' => 'yes',
+                'default' => 'no',
+                'description' => esc_html__('Si activé, seules les sous-catégories des catégories choisies seront affichées (et pas les catégories parentes).', 'category-grid-widget-for-elementor'),
+            ]
+        );
+
+        // Contrôle : Afficher les sous-catégories de la page catégorie actuelle
+        $this->add_control(
+            'subcats_of_current',
+            [
+                'label' => esc_html__('Afficher les sous-catégories de la catégorie actuelle', 'category-grid-widget-for-elementor'),
+                'type' => \Elementor\Controls_Manager::SWITCHER,
+                'label_on' => esc_html__('Oui', 'category-grid-widget-for-elementor'),
+                'label_off' => esc_html__('Non', 'category-grid-widget-for-elementor'),
+                'return_value' => 'yes',
+                'default' => 'no',
+                'description' => esc_html__('Si activé et que l’on est sur une page d’archive de catégorie, affichera ses sous-catégories.', 'category-grid-widget-for-elementor'),
             ]
         );
 
@@ -113,13 +343,13 @@ class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base
         $this->add_control(
             'hide_without_image',
             [
-                'label' => esc_html__('Afficher uniquement catégories avec image', 'category-grid-widget'),
+                'label' => esc_html__('Afficher uniquement catégories avec image', 'category-grid-widget-for-elementor'),
                 'type' => \Elementor\Controls_Manager::SWITCHER,
-                'label_on' => esc_html__('Oui', 'category-grid-widget'),
-                'label_off' => esc_html__('Non', 'category-grid-widget'),
+                'label_on' => esc_html__('Oui', 'category-grid-widget-for-elementor'),
+                'label_off' => esc_html__('Non', 'category-grid-widget-for-elementor'),
                 'return_value' => 'yes',
                 'default' => 'no',
-                'description' => esc_html__('Si activé, les catégories sans image seront masquées.', 'category-grid-widget'),
+                'description' => esc_html__('Si activé, les catégories sans image seront masquées.', 'category-grid-widget-for-elementor'),
             ]
         );
 
@@ -127,12 +357,12 @@ class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base
         $this->add_control(
             'order_by',
             [
-                'label' => esc_html__('Trier par', 'category-grid-widget'),
+                'label' => esc_html__('Trier par', 'category-grid-widget-for-elementor'),
                 'type' => \Elementor\Controls_Manager::SELECT,
                 'options' => [
-                    'name' => esc_html__('Nom (alphabétique)', 'category-grid-widget'),
-                    'count' => esc_html__('Nombre d’articles', 'category-grid-widget'),
-                    'id' => esc_html__('ID (date de création)', 'category-grid-widget'),
+                    'name' => esc_html__('Nom (alphabétique)', 'category-grid-widget-for-elementor'),
+                    'count' => esc_html__('Nombre d’articles', 'category-grid-widget-for-elementor'),
+                    'id' => esc_html__('ID (date de création)', 'category-grid-widget-for-elementor'),
                 ],
                 'default' => 'name',
             ]
@@ -142,11 +372,11 @@ class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base
         $this->add_control(
             'order',
             [
-                'label' => esc_html__('Ordre', 'category-grid-widget'),
+                'label' => esc_html__('Ordre', 'category-grid-widget-for-elementor'),
                 'type' => \Elementor\Controls_Manager::SELECT,
                 'options' => [
-                    'ASC' => esc_html__('Croissant (A-Z / 0-9)', 'category-grid-widget'),
-                    'DESC' => esc_html__('Décroissant (Z-A / 9-0)', 'category-grid-widget'),
+                    'ASC' => esc_html__('Croissant (A-Z / 0-9)', 'category-grid-widget-for-elementor'),
+                    'DESC' => esc_html__('Décroissant (Z-A / 9-0)', 'category-grid-widget-for-elementor'),
                 ],
                 'default' => 'ASC',
             ]
@@ -158,7 +388,7 @@ class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base
         $this->start_controls_section(
             'section_layout',
             [
-                'label' => esc_html__('Mise en page', 'category-grid-widget'),
+                'label' => esc_html__('Mise en page', 'category-grid-widget-for-elementor'),
                 'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
             ]
         );
@@ -167,7 +397,7 @@ class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base
         $this->add_control(
             'columns',
             [
-                'label' => esc_html__('Nombre de colonnes', 'category-grid-widget'),
+                'label' => esc_html__('Nombre de colonnes', 'category-grid-widget-for-elementor'),
                 'type' => \Elementor\Controls_Manager::SELECT,
                 'options' => [
                     1 => '1',
@@ -185,19 +415,21 @@ class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base
         $this->add_control(
             'image_size',
             [
-                'label' => esc_html__('Taille des images', 'category-grid-widget'),
+                'label' => esc_html__('Taille des images', 'category-grid-widget-for-elementor'),
                 'type' => \Elementor\Controls_Manager::SELECT,
                 'options' => [
-                    'thumbnail' => esc_html__('Miniature (thumbnail)', 'category-grid-widget'),
-                    'medium' => esc_html__('Moyen (medium)', 'category-grid-widget'),
-                    'large' => esc_html__('Grand (large)', 'category-grid-widget'),
-                    'full' => esc_html__('Plein (full)', 'category-grid-widget'),
+                    'thumbnail' => esc_html__('Miniature (thumbnail)', 'category-grid-widget-for-elementor'),
+                    'medium' => esc_html__('Moyen (medium)', 'category-grid-widget-for-elementor'),
+                    'large' => esc_html__('Grand (large)', 'category-grid-widget-for-elementor'),
+                    'full' => esc_html__('Plein (full)', 'category-grid-widget-for-elementor'),
                 ],
                 'default' => 'medium',
             ]
         );
 
         $this->end_controls_section();
+
+        $this->register_style_controls();
     }
 
     /**
@@ -221,16 +453,49 @@ class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base
 
         // Déterminer les catégories à afficher (inclure les sous-catégories si demandé).
         $category_ids_to_show = $selected_ids;
-        if (!empty($settings['show_subcategories']) && $settings['show_subcategories'] === 'yes') {
-            // Ajouter les sous-catégories de chaque catégorie sélectionnée.
-            foreach ($selected_ids as $cat_id) {
-                $child_ids = get_term_children($cat_id, 'category');
-                if (is_array($child_ids) && !empty($child_ids)) {
-                    $category_ids_to_show = array_merge($category_ids_to_show, $child_ids);
-                }
+        // if (!empty($settings['show_subcategories']) && $settings['show_subcategories'] === 'yes') {
+        //     // Ajouter les sous-catégories de chaque catégorie sélectionnée.
+        //     foreach ($selected_ids as $cat_id) {
+        //         $child_ids = get_term_children($cat_id, 'category');
+        //         if (is_array($child_ids) && !empty($child_ids)) {
+        //             $category_ids_to_show = array_merge($category_ids_to_show, $child_ids);
+        //         }
+        //     }
+        //     // Éliminer les doublons d'ID au cas où.
+        //     $category_ids_to_show = array_unique($category_ids_to_show);
+        // }
+        // 1) Cas : on veut les sous-catégories de la page actuelle
+        if ('yes' === $settings['subcats_of_current']) {
+            $queried = get_queried_object();
+            if ($queried && isset($queried->term_id) && 'category' === $queried->taxonomy) {
+                $category_ids_to_show = get_term_children($queried->term_id, 'category');
+            } else {
+                // si pas en archive catégorie, rien à afficher
+                return;
+            }
+
+            // 2) Sinon, on part des catégories sélectionnées
+        } else {
+            $category_ids_to_show = $selected_ids;
+
+            // Si on veut uniquement leurs sous-catégories
+            if ('yes' === $settings['only_subcats_of_selected']) {
+                $sub_ids = [];
+                foreach ($selected_ids as $cat_id) {
+                    $children = get_term_children($cat_id, 'category');
+                    if (is_array($children)) {
+                        $sub_ids = array_merge($sub_ids, $children);
+                    }
+                }
+                $category_ids_to_show = array_unique($sub_ids);
+            }
+            // Sinon, l’ancienne logique : on ajoute ou pas les sous-catégories selon show_subcategories
+            elseif ('yes' === $settings['show_subcategories']) {
+                foreach ($selected_ids as $cat_id) {
+                    $category_ids_to_show = array_merge($category_ids_to_show, get_term_children($cat_id, 'category') ?: []);
+                }
+                $category_ids_to_show = array_unique($category_ids_to_show);
             }
-            // Éliminer les doublons d'ID au cas où.
-            $category_ids_to_show = array_unique($category_ids_to_show);
         }
 
         // Préparer les args pour get_terms() – on ne précise PAS le tri si c'est par count
@@ -306,18 +571,23 @@ class Elementor_Category_Grid_Widget extends \Elementor\Widget_Base
         // Rendu HTML
         echo '<div class="elementor-category-grid ' . esc_attr($grid_class) . '">';
         foreach ($terms as $term) {
-            $name = esc_html($term->name);
-            $link = esc_url(get_term_link($term));
-            $image_url = esc_url($term->_image_url);
-
+            $thumbnail_id = get_term_meta($term->term_id, 'thumbnail_id', true);
             echo '<div class="category-card">';
-            echo "<a href=\"{$link}\">";
-            if ($image_url) {
+            echo '<a href="' . esc_url(get_term_link($term)) . '">';
+            if (esc_url($term->_image_url)) {
                 echo '<div class="category-card-image">';
-                echo '<img src="' . $image_url . '" alt="' . $name . '">';
+                echo wp_get_attachment_image(
+                    $thumbnail_id,
+                    $settings['image_size'],
+                    false,
+                    [
+                        'alt' => esc_attr($term->name),
+                        'class' => 'category-card-img',  // optionnel : ajoutez vos classes CSS
+                    ]
+                );
                 echo '</div>';
             }
-            echo '<div class="category-card-name">' . $name . '</div>';
+            echo '<div class="category-card-name">' . esc_html($term->name) . '</div>';
             echo '</a>';
             echo '</div>';
         }