Vous voulez donc ajouter une boutique à votre thème – génial! WooCommerce est un excellent choix. Techniquement parlant TOUT les thèmes sont «compatibles WooCommerce» car c’est un plugin. En théorie, tout plugin devrait fonctionner avec n’importe quel thème WordPress (qui est correctement codé).

En tant que développeur de thèmes, vous souhaiterez peut-être modifier la sortie de WooCommerce pour mieux l’adapter à votre thème ou pour fournir des options à vos utilisateurs finaux qui ne sont pas facilement disponibles dans les paramètres de WooCommerce (comme la modification du nombre de colonnes sur la boutique). Vous trouverez ci-dessous quelques extraits utiles que vous pouvez utiliser pour fournir une «meilleure» prise en charge de WooCommerce dans votre thème et / ou pour modifier des éléments pour votre conception spécifique.

Important: De nombreux extraits de code ci-dessous utilisent des fonctions disponibles dans WooCommerce uniquement. Assurez-vous donc que ces extraits ne sont pas simplement sauvegardés au bas de votre fichier functions.php dans un thème créé pour la distribution. Si vous comptez partager votre thème avec d’autres personnes ou le vendre, assurez-vous de placer les extraits dans leur propre fichier chargé uniquement lorsque le plugin WooCommerce est actif.

Vérifiez si WooCommerce est activé

Dans mes thèmes, j’aime définir une constante personnalisée qui peut être utilisée pour vérifier si WooCommerce est activé de cette façon, je peux inclure des fichiers ou exécuter des fonctions uniquement lorsque WooCommerce est actif (voir le message important ci-dessus si vous ne l’avez pas encore fait).

// Add new constant that returns true if WooCommerce is active
define( 'WPEX_WOOCOMMERCE_ACTIVE', class_exists( 'WooCommerce' ) );

// Checking if WooCommerce is active
if ( WPEX_WOOCOMMERCE_ACTIVE ) {
    // Do something...
    // Such as including a new file with all your Woo edits.
}

Déclarer le support WooCommerce

C’est le premier et le plus important morceau de code à ajouter à votre thème qui «active» le support de WooCommerce et empêche les avertissements du plugin indiquant à l’utilisateur final que le thème n’est pas compatible.

add_action( 'after_setup_theme', function() {
    add_theme_support( 'woocommerce' );
} );

Supprimer WooCommerce CSS

Personnellement, je remplace plutôt les styles WooCommerce pour éviter tout problème éventuel avec les plugins WooCommerce tiers. Cependant, si vous souhaitez supprimer tous les styles WooCommerce, c’est très simple.

L’extrait de code suivant permet de supprimer TOUS les styles WooCommerce:

// Remove all Woo Styles
add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );

Cet extrait de code est un exemple de suppression conditionnelle de styles CSS spécifiques:

function wpex_remove_woo_styles( $styles ) {
    unset( $styles['woocommerce-general'] );
    unset( $styles['woocommerce-layout'] );
    unset( $styles['woocommerce-smallscreen'] );
    return $styles;
}
add_filter( 'woocommerce_enqueue_styles', 'wpex_remove_woo_styles' );

Activer la galerie de produits WooCommerce, le zoom et la lightbox (v3.0 +)

Dans WooCommerce 3.0, ils ont introduit une nouvelle galerie de produits, un zoom et une lightbox. Ceux-ci doivent tous être activés via «add_theme_support» si vous souhaitez les utiliser dans votre thème.

add_theme_support( 'wc-product-gallery-slider' );
add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );

Supprimer le titre de la boutique

De nombreux thèmes ont déjà des fonctions pour afficher les titres des archives, donc ce code supprime le titre supplémentaire de WooCommerce, ce qui est mieux que de le cacher via CSS.

add_filter( 'woocommerce_show_page_title', '__return_false' );

Modifier le titre de l’archive pour la boutique

Si votre thème utilise les fonctions archive_title () ou get_archive_title () pour afficher le titre de vos archives, vous pouvez facilement le modifier via un filtre pour saisir le nom de votre page produit à la place du titre de l’archive de la boutique.

function wpex_woo_archive_title( $title ) {
    if ( is_shop() && $shop_id = wc_get_page_id( 'shop' ) ) {
        $title = get_the_title( $shop_id );
    }
    return $title;
}
add_filter( 'get_the_archive_title', 'wpex_woo_archive_title' );

Changer le nombre de produits affichés par page sur la boutique

Utilisé pour modifier le nombre de produits affichés par page sur la boutique et les archives de produits (catégories et balises).

// Alter WooCommerce shop posts per page
function wpex_woo_posts_per_page( $cols ) {
    return 12;
}
add_filter( 'loop_shop_per_page', 'wpex_woo_posts_per_page' );

Changer le nombre de colonnes affichées sur la boutique par ligne

Je ne comprends pas pourquoi WooCommerce fonctionne de cette manière, mais vous ne pouvez pas simplement modifier le filtre ‘loop_shop_columns’, vous devez également ajouter les classes uniques à la balise body pour que les colonnes fonctionnent. Alors que les codes courts Woo ont un wrapper div avec les classes correctes que les pages de la boutique n’ont pas, c’est pourquoi nous avons besoin de deux fonctions.

// Alter shop columns
function wpex_woo_shop_columns( $columns ) {
    return 4;
}
add_filter( 'loop_shop_columns', 'wpex_woo_shop_columns' );

// Add correct body class for shop columns
function wpex_woo_shop_columns_body_class( $classes ) {
    if ( is_shop() || is_product_category() || is_product_tag() ) {
        $classes[] = 'columns-4';
    }
    return $classes;
}
add_filter( 'body_class', 'wpex_woo_shop_columns_body_class' );

Modifier les flèches de pagination suivante et précédente

Cet extrait de code vous permettra de modifier les flèches de pagination de la boutique pour qu’elles correspondent à celles de votre thème.

function wpex_woo_pagination_args( $args ) {
    $args['prev_text'] = '<i class="fa fa-angle-left"></i>';
    $args['next_text'] = '<i class="fa fa-angle-right"></i>';
    return $args;
}
add_filter( 'woocommerce_pagination_args', 'wpex_woo_pagination_args' );

Modifier le texte du badge OnSale

Particulièrement utile sur les sites utilisant une langue différente ou pour supprimer le point d’exclamation dont je ne suis pas un grand fan.

function wpex_woo_sale_flash() {
    return '<span class="onsale">' . esc_html__( 'Sale', 'woocommerce' ) . '</span>';
}
add_filter( 'woocommerce_sale_flash', 'wpex_woo_sale_flash' );

Modifier les colonnes des miniatures de la galerie de produits

Vous voudrez peut-être modifier le nombre de colonnes pour les vignettes de la galerie de produits uniques en fonction de votre mise en page et cette fonction le fera.

function wpex_woo_product_thumbnails_columns() {
    return 4;
}
add_action( 'woocommerce_product_thumbnails_columns', 'wpex_woo_product_thumbnails_columns' );

Modifier le nombre de produits associés affichés

Utilisé pour modifier le nombre de produits affichés pour les produits connexes sur la page de produit unique.

// Set related products to display 4 products
function wpex_woo_related_posts_per_page( $args ) {
    $args['posts_per_page'] = 4;
    return $args;
}
add_filter( 'woocommerce_output_related_products_args', 'wpex_woo_related_posts_per_page' );

Modifier le nombre de colonnes par ligne pour les sections liées et les ventes incitatives sur les produits

Tout comme la boutique, si vous souhaitez modifier correctement le nombre de colonnes pour les produits connexes et les produits de vente incitative sur les pages de produit individuelles, vous devez filtrer les colonnes et également modifier les classes de corps en conséquence.

// Filter up-sells columns
function wpex_woo_single_loops_columns( $columns ) {
    return 4;
}
add_filter( 'woocommerce_up_sells_columns', 'wpex_woo_single_loops_columns' );

// Filter related args
function wpex_woo_related_columns( $args ) {
    $args['columns'] = 4;
    return $args;
}
add_filter( 'woocommerce_output_related_products_args', 'wpex_woo_related_columns', 10 );

// Filter body classes to add column class
function wpex_woo_single_loops_columns_body_class( $classes ) {
    if ( is_singular( 'product' ) ) {
        $classes[] = 'columns-4';
    }
    return $classes;
}
add_filter( 'body_class', 'wpex_woo_single_loops_columns_body_class' );

Ajouter un lien de panier dynamique et le coût du panier à votre menu

Cet extrait ajoutera un article de panier WooCommerce à votre menu qui affiche le coût des articles de votre panier. De plus, si votre site a activé Font-Awesome, il affichera une petite icône de panier. Important: Ces fonctions ne doivent pas être encapsulées dans une condition is_admin () car elles reposent sur AJAX pour mettre à jour le coût, vous devez vous assurer que les fonctions sont disponibles lorsque is_admin () retourne true et false.

// Add the cart link to menu
function wpex_add_menu_cart_item_to_menus( $items, $args ) {

    // Make sure your change 'wpex_main' to your Menu location !!!!
    if ( $args->theme_location === 'wpex_main' ) {

        $css_class = 'menu-item menu-item-type-cart menu-item-type-woocommerce-cart';
        
        if ( is_cart() ) {
            $css_class .= ' current-menu-item';
        }

        $items .= '<li class="' . esc_attr( $css_class ) . '">';

            $items .= wpex_menu_cart_item();

        $items .= '</li>';

    }

    return $items;

}
add_filter( 'wp_nav_menu_items', 'wpex_add_menu_cart_item_to_menus', 10, 2 );

// Function returns the main menu cart link
function wpex_menu_cart_item() {

    $output = '';

    $cart_count = WC()->cart->cart_contents_count;

    $css_class = 'wpex-menu-cart-total wpex-cart-total-'. intval( $cart_count );

    if ( $cart_count ) {
        $url  = WC()->cart->get_cart_url();
    } else {
        $url  = wc_get_page_permalink( 'shop' );
    }

    $html = $cart_extra = WC()->cart->get_cart_total();
    $html = str_replace( 'amount', '', $html );

    $output .= '<a href="'. esc_url( $url ) .'" class="' . esc_attr( $css_class ) . '">';

        $output .= '<span class="fa fa-shopping-bag"></span>';

        $output .= wp_kses_post( $html );

    $output .= '</a>';

    return $output;
}


// Update cart link with AJAX
function wpex_main_menu_cart_link_fragments( $fragments ) {
    $fragments['.wpex-menu-cart-total'] = wpex_menu_cart_item();
    return $fragments;
}
add_filter( 'add_to_cart_fragments', 'wpex_main_menu_cart_link_fragments' );

Conclusion

WooCommerce fonctionnera avec n’importe quel thème par défaut, mais l’ajout d’un support supplémentaire pour le plugin afin qu’il s’adapte mieux à votre thème est très facile à faire. J’ai en fait écrit ce post en codant notre Thème Blog et boutique WordPress de New York la plupart de ces ajustements sont donc inclus dans notre thème. Ou si vous préférez, vous pouvez acheter le thème pour voir comment tout a été fait (voir les fichiers sur wpex-new-york / inc / woocommerce) – cela peut être un moyen plus simple pour vous d’apprendre à ajouter correctement prise en charge personnalisée du plugin WooCommerce en regardant un thème déjà codé.

Y a-t-il d’autres extraits que vous pensez appartenir à cette liste ou que vous trouverez utiles lors du développement de nouveaux thèmes prêts pour WooCommerce?

Share: