Un petit défi pour un collègue australien. Il avait le plug-in Brands pour WooCommerce mais nous aurions aimé pouvoir filtrer sur les marques ainsi que d'avoir des archives par marques.
Dans un premier temps, nous allons créer l'attribut "Brands" ou "Marques" dans WooCommerce et nous allons cocher "Activer les archives"
Ensuite nous allons installer le plug-in Taxonomy Images et aller activer sur "Produit Brands".
J'ai ensuite créer une simple page Brands ou Marques et ajouter sur celle-ci un code bloc avec :
<?php
$args = array(
'taxonomy' => 'pa_brands',
'term_args' => array(
'hide_empty' => false,
)
);
$terms = apply_filters( 'taxonomy-images-get-terms', '', $args );
foreach ($terms as $term){
$archive_link = get_term_link( $term->slug, 'pa_brands' );
$image_attributes = wp_get_attachment_image_src( $term->image_id, 'thumbnail' );
$html = '<div class="mr-brand"><a href="' . $archive_link . '">';
$html .= '<option>' . $term->name . '</option>';
if ( $image_attributes ) {
$html .= '<img src="' . $image_attributes[0] . '" width="' . $image_attributes[1] . '" height="' .$image_attributes[2] . '" />';
}
$html .= '</div></a>';
echo $html;
}
?>
Nous récupérons donc toutes nos marques à l'intérieur d'une div qui a le lien vers l'archive de la marque ainsi que l'image que nous avons pu insérer avec le plug-in.
N'oubliez pas de faire un template ou de configurer votre template de catégorie sur cette taxonomie. Petite note : l'utilisation des taxonomies d'attributs dans WooCommerce doit être précédées de pa_.
Pour terminer nous allons peut-être aussi vouloir récupérer nos marques sur les produits (single). Voici la fonction à utiliser dans un bloc de code :
<?php
global $product;
$rmbrands = $product->get_attribute( 'pa_brands' );
echo '<div class="rm-brands">Brand: ' . $rmbrands . '</div>';
$mytaxonomy = 'pa_brands';
$post_id = get_the_ID();
$terms = wp_get_post_terms( $post_id, $mytaxonomy ); // Terms for this post
$custom_taxonomy_images = get_option( 'taxonomy_image_plugin' ); // Plugin images data
if ( empty( $terms ) ) return; // If no terms found, we exit.
echo '<div class="rm-brands-container">';
// Loop through each term in this post for the defined taxonomy
foreach( $terms as $term ) {
$attachment_id = $custom_taxonomy_images[intval($term->term_id)]; // Get image Attachement ID
$image = wp_get_attachment_image( $attachment_id, 'thumbnail' ); // Get image to be displayed
$url = get_term_link( $term->term_id, $taxonomy ); // Get term URL
?>
<div class=”rm-brands-image”>
<a href="<?php echo $url; ?>"><?php echo $image; ?>
</div>
<?php
}
echo '</div>';
?>
Quelques snippets utiles pour WooCommerce
Certaines sources viennent du très bon site BusinessBloomer
Ajouter des notifications d'erreur de champ en ligne
/**
* @snippet Remove Add Cart, Add View Product @ WooCommerce Loop
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @testedwith WooCommerce 3.6.2
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/
// First, remove Add to Cart Button
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
// Second, add View Product Button
add_action( 'woocommerce_after_shop_loop_item', 'bbloomer_view_product_button', 10 );
function bbloomer_view_product_button() {
global $product;
$link = $product->get_permalink();
echo '<a href="' . $link . '" class="button addtocartbutton">Details</a>';
}
Remplacer "Ajouter un panier" par "Voir le produit"
/**
* @snippet Remove Add Cart, Add View Product @ WooCommerce Loop
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @testedwith WooCommerce 3.6.2
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/
// First, remove Add to Cart Button
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
// Second, add View Product Button
add_action( 'woocommerce_after_shop_loop_item', 'bbloomer_view_product_button', 10 );
function bbloomer_view_product_button() {
global $product;
$link = $product->get_permalink();
echo '<a href="' . $link . '" class="button addtocartbutton">Details</a>';
}
Afficher "épuisé" sur les pages en boucle
/**
* @snippet Display "Sold Out" on Loop Pages - WooCommerce
* @how-to Get CustomizeWoo.com FREE
* @sourcecode https://businessbloomer.com/?p=17420
* @author Rodolfo Melogli
* @testedwith WooCommerce 3.4.3
*/
add_action( 'woocommerce_before_shop_loop_item_title', 'bbloomer_display_sold_out_loop_woocommerce' );
function bbloomer_display_sold_out_loop_woocommerce() {
global $product;
if ( !$product->is_in_stock() ) {
echo '<span class="soldout">' . __( 'SOLD OUT', 'woocommerce' ) . '</span>';
}
}
CSS :
.soldout {
padding: 3px 8px;
text-align: center;
background: #222;
color: white;
font-weight: bold;
position: absolute;
top: 6px;
right: 6px;
font-size: 12px;
}
Afficher les sous-catégories de produits
/**
* @snippet WooCommerce Show Product Subcategories
* @how-to Get CustomizeWoo.com FREE
* @sourcecode https://businessbloomer.com/?p=17525
* @author Rodolfo Melogli
* @compatible WooCommerce 3.4.5
*/
add_action( 'woocommerce_after_shop_loop_item_title', 'bbloomer_show_all_subcats', 2 );
function bbloomer_show_all_subcats() {
global $post;
$cats = get_the_terms( $post->ID, 'product_cat' );
if ( ! empty( $cats ) ) {
foreach ( $cats as $term ) {
// If parent 116 === cat ID echo subcat name...
if ( 116 === $term->parent ) {
echo $term->name;
}
}
}
}
En cours d’élaboration, doit être vérifié et complété !
Vous pouvez retrouvez des références ici Hooks et ici pour les produits seuls
Titre
<?php global $product; $product = wc_get_product( id ); //archive seulement echo '<div class="woo-title"><h2>' . $product->get_title() . '</h2></div>'; ?>
Permaliens
echo 'Lien : ' . get_permalink( $product->get_id() ) ;
Image principale
ATTENTION dans ce cas les badges ne sont pas récupérés
<?php the_post_thumbnail(); // Without parameter ->; Thumbnail the_post_thumbnail( 'thumbnail' ); // Thumbnail (default 150px x 150px max) the_post_thumbnail( 'medium' ); // Medium resolution (default 300px x 300px max) the_post_thumbnail( 'medium_large' ); // Medium-large resolution (default 768px x no height limit max) the_post_thumbnail( 'large' ); // Large resolution (default 1024px x 1024px max) the_post_thumbnail( 'full' ); // Original image resolution (unmodified) the_post_thumbnail( array( 100, 100 ) ); // Other resolutions (height, width) ?>
Galerie
Fonction avec divers mode de récupération des images de la galerie d'un produit. Intégration assez aisée avec Swiper (à venir).
<?php
global $product;
$attachment_ids = $product->get_gallery_attachment_ids();
foreach( $attachment_ids as $attachment_id )
{
//Get URL of Gallery Images - default wordpress image sizes
echo $Original_image_url = wp_get_attachment_url( $attachment_id );
echo $full_url = wp_get_attachment_image_src( $attachment_id, 'full' )[0];
echo $medium_url = wp_get_attachment_image_src( $attachment_id, 'medium' )[0];
echo $thumbnail_url = wp_get_attachment_image_src( $attachment_id, 'thumbnail' )[0];
//Get URL of Gallery Images - WooCommerce specific image sizes
echo $shop_thumbnail_image_url = wp_get_attachment_image_src( $attachment_id, 'shop_thumbnail' )[0];
echo $shop_catalog_image_url = wp_get_attachment_image_src( $attachment_id, 'shop_catalog' )[0];
echo $shop_single_image_url = wp_get_attachment_image_src( $attachment_id, 'shop_single' )[0];
//echo Image instead of URL
echo wp_get_attachment_image($attachment_id, 'full');
echo wp_get_attachment_image($attachment_id, 'medium');
echo wp_get_attachment_image($attachment_id, 'thumbnail');
echo wp_get_attachment_image($attachment_id, 'shop_thumbnail');
echo wp_get_attachment_image($attachment_id, 'shop_catalog');
echo wp_get_attachment_image($attachment_id, 'shop_single');
}
?>
Récupérer les catégories des produits
global $product;
$product_cats_ids = wc_get_product_term_ids( $product->get_id(), 'product_cat' );
foreach( $product_cats_ids as $cat_id ) {
$term = get_term_by( 'id', $cat_id, 'product_cat' );
echo $term->name;
}
Insérer un attribut
function oxychild_woo_attribute(){
global $product;
$bui = $product->get_attribute( 'pa_pena' );
echo '<div class="bu1_attribute">' . $bui . '</div>';
}
//add_action( 'woocommerce_shop_loop_item_title', 'bui_woo_attribute', 05 );
//add_action('woocommerce_single_product_summary', 'cw_woo_attribute', 25);
Il arrive dans certains cas que l'utilisation des éléments WooCommerce d'Oxygen ne suffisent pas pour nos besoins. Néanmoins il existe des solutions pour personnaliser nos modèles de pages WooCommerce grâce aux hook pour WooCommerce.
Il existe deux types de hook: les actions et les filtres. L'action vous permet d'ajouter du code personnalisé à différents endroits. Le filtre, en revanche, vous permet de manipuler, de remplacer et de renvoyer une nouvelle valeur de variable à la fin.
Si vous souhaitez utiliser un hook pour modifier ou ajouter un code personnalisé, vous pouvez l'ajouter dans le fichier functions.php d'OxyChild ou autre. L'utilisation avec le plugin Code Snippets est également possible sous forme de snippet avec l'avantage d'activer et désactiver plus simplement.
Si vous souhaitez modifier ou ajouter un code, vous devez d'abord aller dans le dossier du plugin. Vous pouvez le faire en accédant à woocommerce / templates / archive-product.php. Une fois que vous y êtes, vous devez vérifier les hooks que les auteurs du plugin ont implémentés ici.
Un bon lien pour visualiser l'archive des produits : https://www.businessbloomer.com/woocommerce-visual-hook-guide-archiveshopcat-page/
Comment supprimer le fil d'ariane
Le code personnalisé ci-dessous supprime la fonction woocommerce_breadcrumb qui ajoute un balisage de fil d'Ariane. Nous avons défini la priorité sur 20, car il s'agit d'une valeur de priorité par défaut dans le fichier de modèle de plug-in.
/** * Hook: woocommerce_before_main_content. * * @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content) * @hooked woocommerce_breadcrumb - 20 * @hooked WC_Structured_Data::generate_website_data() - 30 */ do_action( 'woocommerce_before_main_content' );
Et maintenant, nous devons définir le même afin de supprimer cette zone.
// Remove breadcrumbs remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20 );
Comment masquer le titre de la page
if ( ! function_exists( 'hide_woocommerce_page_title' ) ) {
/**
* Hide WooCommerce page title
*/
function hide_woocommerce_page_title() {
return false;
}
add_filter( 'woocommerce_show_page_title', 'hide_woocommerce_page_title' );
}
Comment modifier le nombre de produits pour la page de la boutique
if ( ! function_exists( 'change_woocommerce_products_per_page' ) ) {
/**
* Change number of products on main shop page
*/
function change_woocommerce_products_per_page() {
return 8;
}
add_filter( 'loop_shop_per_page', 'change_woocommerce_products_per_page', 20 );
}
Comment changer les positions des prix et des notes
Pour changer la position des éléments dans un certain balisage (dans ce cas, un article de produit), vous pouvez utiliser les fonctions remove_action et add_action avec des priorités. Si des éléments sont ajoutés avec le hook, les priorités définissent l'endroit où l'élément sera à l'intérieur du balisage. La priorité inférieure rendra cet élément comme le premier.
Le plugin WooCommerce a beaucoup de hooks et dans la plupart des cas, les éléments sont ajoutés avec les hooks. Par conséquent, cet article est une occasion idéale de vous montrer comment vous pouvez également le faire.
Ici, nous allons vous montrer comment changer la position des éléments de prix et de notation. Le code pour cela sera:
// Remove functions from woocommerce_after_shop_loop_item_title hook with original priority remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5 ); remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 ); // Added functions to woocommerce_after_shop_loop_item_title hook with new priority add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 10 ); add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 5 );
Tout d'abord, nous supprimerons les deux éléments de la partie article du produit avec les fonctions et les priorités d'origine. Vous pouvez trouver les deux éléments dans le fichier content-product.php.
/** * Hook: woocommerce_after_shop_loop_item_title. * * @hooked woocommerce_template_loop_rating - 5 * @hooked woocommerce_template_loop_price - 10 */ do_action( 'woocommerce_after_shop_loop_item_title' );
Ensuite, nous ajouterons les mêmes fonctions sur le même hook avec de nouvelles priorités.
Liens de sources d'un article an anglais : https://wpklik.com/wordpress-tutorials/woocommerce-hooks/
Et avec Oxygen ?
Après avoir vu grâce à cet article les hook et leurs usages, nous allons pouvoir les utiliser dans Oxygen, sous forme de snippet/fontions ou dans des blocs de code, voir les modifier. Voici un exemple de snippet permettant d'afficher les dimensions d'un produit en dessous du titre sur la page d'archive (dans ce cas les produits étant des tableaux, nous voulons informer l'acheteur de la taille de celui-ci) ...
function taille_woo_attribute(){
global $product;
$product_width = $product->get_width();
$pruduct_length = $product->get_length();
$product_dimensions = $product->get_dimensions();
if (!empty($product_width) && !empty($product_length)) {
echo '<div class="size_art">' . $product_length . ' de largeur sur ' . $product_width . ' de hauteur.</div>';
}
if ( $product->has_dimensions() ) {
echo '<div class="size_artdim">Dimensions : ' . $product_dimensions . '</div>';
}
}
add_action( 'woocommerce_shop_loop_item_title', 'taille_woo_attribute', 10 );
Notez que $product_width et lenght peuvent être supprimé car non utilisés, mais il pourrait servir à retourner juste d'autres valeurs dans le "echo". Voir sur le lien suivant les valeurs récupérables sur un produit.
Liens des informations produits : https://www.businessbloomer.com/woocommerce-easily-get-product-info-title-sku-desc-product-object/
Dans un code bloc vous pouvez très bien récupérer le template par défaut de WooCommerc avec
<?php
global $product;
/**
* Hook: woocommerce_before_single_product.
*
* @hooked woocommerce_output_all_notices - 10
*/
do_action( 'woocommerce_before_single_product' );
if ( post_password_required() ) {
echo get_the_password_form(); // WPCS: XSS ok.
return;
}
?>
<div id="product-<?php the_ID(); ?>" <?php wc_product_class( '', $product ); ?>>
<?php
/**
* Hook: woocommerce_before_single_product_summary.
*
* @hooked woocommerce_show_product_sale_flash - 10
* @hooked woocommerce_show_product_images - 20
*/
do_action( 'woocommerce_before_single_product_summary' );
?>
<div class="summary entry-summary">
<?php
/**
* Hook: woocommerce_single_product_summary.
*
* @hooked woocommerce_template_single_title - 5
* @hooked woocommerce_template_single_rating - 10
* @hooked woocommerce_template_single_price - 10
* @hooked woocommerce_template_single_excerpt - 20
* @hooked woocommerce_template_single_add_to_cart - 30
* @hooked woocommerce_template_single_meta - 40
* @hooked woocommerce_template_single_sharing - 50
* @hooked WC_Structured_Data::generate_product_data() - 60
*/
do_action( 'woocommerce_single_product_summary' );
?>
</div>
<?php
/**
* Hook: woocommerce_after_single_product_summary.
*
* @hooked woocommerce_output_product_data_tabs - 10
* @hooked woocommerce_upsell_display - 15
* @hooked woocommerce_output_related_products - 20
*/
do_action( 'woocommerce_after_single_product_summary' );
?>
</div>
<?php do_action( 'woocommerce_after_single_product' ); ?>
Dans le cas de problèmes avec le module "Product Image" qui serait insérer dans un repeater, vous pouvez utiliser
<?php do_action( 'woocommerce_before_single_product_summary' ); ?>
Attention que l'avantage de cette action est de récupérer également les badges associés aux produits. Utiliser un fonctions plus sélective peut vous rendre un contenu plus précis mais pas forcément la totalité du code voulu.
Liens des références des hook : https://docs.woocommerce.com/wc-apidocs/hook-docs.html
La structure du code de base
Au tout début, la première chose dont nous aurons besoin est un bloc de code de départ que nous pouvons modifier selon nos besoins:
<?php
$params = array('posts_per_page' => 5); // (1)
$wc_query = new WP_Query($params); // (2)
if ($wc_query->have_posts()) : // (3)
while ($wc_query->have_posts()) : // (4)
$wc_query->the_post(); // (4.1)
the_title(); // (4.2)
endwhile;
wp_reset_postdata(); // (5)
else: ?>
<p>
<?php _e( 'No Products' ); // (6) ?>
</p>
<?php endif; ?>
Le code ci-dessus extrait les titres des cinq articles les plus récents de notre base de données WordPress en utilisant le processus suivant:
- Un tableau de paramètres avec lequel WP_Query fonctionne est créé; pour commencer, ce ne sont que les publications de base, mais en ajoutant plus de détails à ces paramètres, nous pouvons obtenir des résultats différents pour nos requêtes.
- WP_Query est utilisé pour interroger les paramètres créés dans la première ligne.
- La requête est vérifiée pour voir si elle a renvoyé des résultats.
- S'il y a des résultats, nous les répétons:
4.1 Tout d'abord, définissez la variable globale $ post, qui garantit le fonctionnement de la fonction suivante.
4.2 Deuxièmement, définir la variable the_title (), qui est responsable de l'affichage du titre du message. - Ensuite, lorsque les articles sont affichés, nous retournons la variable $ post à son état d'origine avec la fonction wp_reset_postdata.
- Dans le cas où la vérification à l'étape 3 constate qu'il n'y a pas de publications à afficher, au lieu d'itérer sur des résultats inexistants, nous affichons simplement une invite appropriée.
Tirer des produits WooCommerce au lieu de messages WordPress
Tout ce que nous devons faire est de changer le tableau des paramètres de requête pour inclure le paramètre post_type et lui dire de récupérer les produits :
$params = array(
'posts_per_page' => 5,
'post_type' => 'product'
);
Affichage des produits WooCommerce en promotion
Dans WooCommerce, un champ sale_price est chargé de définir le prix spécial réduit; lorsque le produit n'est plus en promotion, ce champ est vide.
$params = array( 'posts_per_page' => 5, 'post_type' => 'product', 'meta_key' => '_sale_price', 'meta_value' => '0', 'meta_compare' => '>=' );
Affichage de variantes de produits promotionnels
Le code de la dernière section s'occupe d'afficher les produits en promotion, mais qu'en est-il des variantes d'un seul produit? Après tout, si une variante est en vente, nous voudrons probablement aussi que le reste des variantes soit en vente! La raison pour laquelle le code de la dernière section n'affiche pas les variantes en standard est que WooCommerce stocke chaque variante de produit en tant que publication distincte et en tant que publication d'un autre type. Pour contourner ce problème, nous devons apporter une autre petite modification à notre tableau de paramètres:
$params = array(
'posts_per_page' => 5,
'post_type' => array('product', 'product_variation'),
'meta_key' => '_sale_price',
'meta_value' => 0,
'meta_compare' => '>='
'meta_type' => 'NUMERIC'
);
Displaying available products only
Vos clients ne seront pas très satisfaits si vous essayez de leur vendre un produit sur votre page d'accueil que vous n'avez pas en stock, c'est donc une bonne idée d'inclure une telle vérification dans votre code. La situation de stockage est gérée par le champ _stock_status, qui prend deux valeurs: instock et outofstock. Ainsi, pour afficher les produits dont le prix est inférieur à 5 et qui sont en stock, nous devons utiliser les paramètres suivants :
$params = array(
'posts_per_page' => 5,
'post_type' => array('product', 'product_variation'),
'meta_query' => array(
array(
'key' => '_price',
'value' => 5,
'compare' => '<',
'type' => 'NUMERIC'
),
array(
'key' => '_stock_status',
'value' => 'instock'
)
)
);
Source : https://www.gavick.com/blog/wp_query-woocommerce-products
Autres informations en anlgais : https://github.com/woocommerce/woocommerce/wiki/wc_get_products-and-WC_Product_Query
Suite de mon premier tutoriel (qui devenait long) pour l'ajout d'un panier sur un site WooCommerce (compatible avec WPML). Basé sur des propositions/aides d'utilisateurs du groupe Facebook anglais d'Oxygen.
Solution par plugin
La solution la plus simple est d'utiliser ce plugin https://wordpress.org/plugins/woocommerce-menu-bar-cart/ (ou un autre du genre). Pour rappel avec Oxygen, si vous voulez votre panier dans la barre de côté, il faudra utiliser WooSidebars.
Solution avec du code
Un utilisateur a expliqué qu'il est possible de récupérer la fonction du thème Storefront de WooCommerce et de l'intégrer dans notre site réalisé avec Oxygen. Voici son site en allemand https://wewiradirekt.de/ .
La première étape sera d'installer, si ce n'est déjà fait, Code Snippet pour mettre la fonction. https://wordpress.org/plugins/code-snippets/ et d'y insérer
<?php function wc_refresh_mini_cart_count($fragments){
ob_start();
?>
<div id="mini-cart-count">
<?php echo WC()->cart->get_cart_contents_count(); ?>
</div>
<?php
$fragments['#mini-cart-count'] = ob_get_clean();
return $fragments;
}
add_filter( 'woocommerce_add_to_cart_fragments', 'wc_refresh_mini_cart_count');
Ensuite nous allons aller placer notre panier dans le menu (mais cette version permet le placement là où vous le voulez) en allant dans le template Main (ou équivalent).
A l'endroit voulu dans votre menu :
1 Créer une div avec deux classes "custom-mini-cart" et "position-relative" (important pour la suite)
2 Placer votre icône représentant le panier
3 Mettre un module de bloc de code avec dans la partie PHP/HTML (Note : "Panier" est à traduire si le site n'est pas en français)
<a class="ct-link-button cart-button" href="/panier/" title="Panier">Panier</a> <div id="mini-cart-count"></div> <div id="mini-cart-wrapper"> <div class="widget_shopping_cart_content"><?php woocommerce_mini_cart(); ?></div> </div>
4 Mettre le CSS dans la feuille de style CSS (stylesheet) et le personnaliser à votre site.
/*-- CART --*/
#mini-cart-count {
display: inline-block;
color: white;
background: #0000ff;
width: 26px;
height: 26px;
border-radius: 50%;
padding-top: 4px;
text-align: center;
font-size: 12px;
font-weight: 800;
margin-left: 10px;
}
#mini-cart-wrapper {
position: absolute;
top: calc(100% + 1px);
left: 50%;
transform: translate(-50%,10%);
background-color: #d3ced2;
backdrop-filter: blur(20px) saturate(180%);
border-radius: 4px;
padding: 25px;
color: white;
pointer-events: none;
opacity: 0;
text-align: center;
transition: all 50ms linear;
z-index: 99;
}
.cart-button {
background-color: transparent;
border: 1px solid #0000ff;
color: #0000ff;
padding: 7px 15px;
font-weight: 600;
}
.position-relative {
position: relative!important;
}
.widget_shopping_cart_content {
width: 330px;
}
.custom-mini-cart:hover #mini-cart-wrapper {
pointer-events: all;
opacity: 1;
transform: translate(-50%,0%);
transition: all 240ms linear;
}
.cart-button.ct-link-button {
color: #0000ff;
padding: 2px 16px;
}
#mini-cart-wrapper a:not(.remove) {
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
width: 90%;
text-align: left;
align-items: center;
}
.custom-mini-cart .woocommerce-mini-cart.cart_list.product_list_widget {
margin: 0px;
}
.buttons.woocommerce-mini-cart__buttons {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
}
.custom-mini-cart .mini_cart_item, .woocommerce .custom-mini-cart ul.product_list_widget li {
display: flex;
flex-wrap: wrap;
margin-bottom: 8px;
background-color: rgba(255,255,255,0.04);
padding-top: 10px;
border: none;
}
.woocommerce ul.product_list_widget li {
border-bottom: 1px solid #d3ced2;
margin-bottom: 4px;
padding-bottom: 8px;
}
.widget_shopping_cart_content .woocommerce-mini-cart__total {
margin-bottom: 0px!important;
text-align: left;
}
REMARQUE : le contenu du panier est visible lors du survol du bouton. J'avais essayé de descendre le contenu du panier mais dans ce cas le passage du survol du bouton au contenu du panier fait que le "wrapper" se ferme. Pour la personnalisation vous devez avoir les notions nécessaires du code CSS.
Préambule :
Je ne suis pas développeur et je partage mon expérience. La demande de mon client (en sous-traitance) était d’avoir un site e-commerce qui soit mis à jour quotidiennement depuis la caisse enregistreuse d’un magasin. Le développeur envoie un fichier xml en FTP qui est lancé par une commande cron tous les soirs (jours ouvrables du magasin) avec WP All Import (plugin également de Soflyy). Vu la lenteur du site avec mon ancien thème, j’ai refait le site avec Oxygen et j’ai supprimé certains plugins (Ultimate Member notamment) et simplifié pour conserver de bonnes performances. Le client m’a donné les instructions du design qui est très simple (le client est Roi).
WPML avec Oxygen
J’utilise la duplication de mes templates et pages après avoir réalisé mon site dans la première langue. Pour réaliser cette opération il faudra autoriser WPML à dupliquer les templates d’Oxygen (les pages et articles sont normalement configurés directement). Il faudra se rendre dans “WPML > Paramètres > Traduction des types de publication” et activer “Templates”
Note : ceci doit être également réalisé si vous travaillez avec des blocks à traduire ou d’autres éléments. Pour les Widgets, mettre le plugin WooSidebars et là je crée mes widgets pour les deux langues.
Ensuite, se rendre dans “WPML > Gestion des traductions” et sélectionner le contenu à traduire. Dans l’image ci-dessous j’ai rajouté uniquement une page Test pour l’exemple. Dans votre cas il faudra choisir toutes les pages voulues et ensuite répéter l’opération pour tous les templates. Cochez “Dupliquer le contenu” et ensuite validez avec “Duplication”.
À partir de là, vous pouvez vous rendre dans vos pages et templates et, en choisissant la seconde langue, vous avez toutes vos pages dupliquées mais identiques à la première langue. Il nous reste juste une opération à réaliser sur CHAQUE page/template de la seconde (ou plus) langue. En se rendant sur la page, il faut demander à WPML de traduire la "copie" à part de manière à garder deux différentes, ce qui est le but. Donc, cliquez sur "Traduire à part" et ensuite vous pouvez traduire/changer le contenu de la page/template dans l’autre langue.
Note : prendre en compte le fait qu’à intérieur des templates il faudra modifier certains paramètres pour les queries ainsi que les widgets insérés. C’est logique. Ne pas oublier qu’il faut, suivant les cas, traduire les attributs et catégories mais ce tutoriel est juste fait pour aider l’intégration avec Oxygen.
Pages de connexion / déconnexion WooCommerce
Certains doivent le savoir mais pour moi ce fut une petite surprise. Réaliser une page de connexion avec WooCommerce est très simple. Par défaut lorsque vois insérer le module "My account" d’Oxygen et que le client n’est pas connecté vous avez un bloc avec deux colonnes S’enregistrer et Se connecter. Personnellement je voulais avoir mes formulaires Se connecter et S’inscrire séparés. Un peu de CSS est suffisant.
Note : le module "My account" dans l’édition d’Oxygen ne montre pas le même résultat que sur le front-end (site), pas de panique. Le code block contient le CSS pour séparer les deux colonnes.
CSS pour conserver uniquement la colonne connexion (peut varier suivant votre personnalisation, c’est une base) :
.woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 {
display: none;
}
.woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1 {
float: left;
width: 100%;
}
Pour une page S’inscrire :
.woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1 {
display: none;
}
.woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 {
float: right;
width: 100%;
}
Et voilà ???? (le cadre peut être enlevé à votre convenance)
Dernier point, l’accès pour la connexion
Oxygen permet avec les conditions l’accès aux pages selon que l’utilisateur est connecté ou pas (User logged in) mais je voulais dans mon menu que le client voit Se connecter s’il n’est pas connecté et Déconnexion s’il est connecté. Dans ce cas il faudra installer User menu (gratuit) qui va résoudre ce point. Après installation, rendez-vous dans votre menu et choisissez les pages à autoriser (dans mon cas Connexion/Déconnexion ainsi que Mon Compte) et changer les conditions. WooCommerce, dans la section menu, propose les Terminaisons WooCommerce (à activer éventuellement dans les options de l’écran) où vous trouverez la Déconnexion et où vous pourrez choisir la redirection après déconnexion.
Lien de User Menus https://fr.wordpress.org/plugins/user-menus/
Voilà, pour ce tutoriel, j’espère qu’il vous a été utile et qu’il est clair. Bon travail et, comme on dit, "Y a plus qu’à ... "
