WooCommerce multilangue (WPML) (partie 2) panier

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.