Jak dodać informację „Brak w magazynie” na stronie produktów WooCommerce

Czy zastanawiałeś się kiedyś, jak w prosty sposób poinformować klientów Twojego sklepu internetowego o tym, że dany produkt jest już niedostępny? W dzisiejszym artykule przedstawię Ci rozwiązanie tego problemu, które pozwoli Ci na dodanie etykiety „Brak w magazynie” do produktów, które zostały sprzedane. Dzięki temu Twoi klienci będą mieli jasność co do dostępności produktów w Twoim sklepie.

W artykule znajdziesz krok po kroku instrukcję, jak dodać odpowiedni kod PHP oraz CSS do Twojej strony na WordPressie. Wszystko to z pomocą wtyczki WP Kod, która umożliwia łatwe dodawanie kawałków kodu bez konieczności tworzenia motywu potomnego. Dodatkowo, przedstawię Ci sposób na dostosowanie wyglądu etykiety, aby idealnie pasowała do designu Twojego sklepu.

Zapraszam do lektury artykułu, a także do obejrzenia osadzonego poniżej filmu, w którym krok po kroku pokazuję cały proces. Mam nadzieję, że dzięki temu rozwiązaniu Twoi klienci będą bardziej zadowoleni z zakupów w Twoim sklepie. Jeśli masz jakieś pytania lub sugestie, śmiało zostaw komentarz pod artykułem!

Jak dodać „Brak w magazynie” – kod php

add_action( 'woocommerce_before_shop_loop_item_title', 'wpziom_display_stock_status' );

function wpziom_display_stock_status() {
    global $product;
    if ( !$product->is_in_stock() ) {
        echo '<span class="wpziom-out-of-stock-label">Brak w magazynie</span>';
    }
}

Jak dodać label „Brak w magazynie” – omówienie kodu

– add_action: Funkcja WordPress, która pozwala na dodanie własnej funkcji do istniejącego “hooka”.
– wpziom_display_stock_status: Nasza funkcja, która sprawdza dostępność produktu w magazynie.
– global $product: Deklaracja globalnej zmiennej, aby uzyskać dostęp do obiektu produktu.
– is_in_stock(): Metoda WooCommerce sprawdzająca dostępność produktu w magazynie.
– echo: Funkcja PHP wyświetlająca etykietę “Brak w magazynie”.

Kod php, który dodaje Brak w magazynie i classy do zdjęcia produktu

add_action( 'woocommerce_before_shop_loop_item', 'wpziom_add_out_of_stock_class' );

function wpziom_add_out_of_stock_class() {
    global $product;

    if ( !$product->is_in_stock() ) {
        echo '<div class="wpziom-out-of-stock">';
    }
}

add_action( 'woocommerce_after_shop_loop_item', 'wpziom_close_out_of_stock_div' );

function wpziom_close_out_of_stock_div() {
    global $product;

    if ( !$product->is_in_stock() ) {
        echo '</div>';
    }
}

add_action( 'woocommerce_before_shop_loop_item_title', 'wpziom_display_stock_status' );

function wpziom_display_stock_status() {
    global $product;

    if ( !$product->is_in_stock() ) {
        echo '<span class="wpziom-out-of-stock-label">Brak w magazynie</span>';
    }
}

Omówienie kodu:

1. add_action( 'woocommerce_before_shop_loop_item’, 'wpziom_add_out_of_stock_class’ );
   • add_action to funkcja WordPress, która pozwala na dodanie własnej funkcji do istniejącego „haka” w WordPress lub wtyczce.
   • 'woocommerce_before_shop_loop_item' to hak WooCommerce, który pozwala na dodanie zawartości przed każdym produktem na liście produktów.
   • 'wpziom_add_out_of_stock_class' to nazwa funkcji, którą chcemy wywołać.
2. function wpziom_add_out_of_stock_class() { … }
   • Definiujemy nową funkcję o nazwie wpziom_add_out_of_stock_class.
   • global $product: Uzyskujemy dostęp do globalnej zmiennej $product, która reprezentuje aktualny produkt w pętli produktów.
   • if ( !$product->is_in_stock() ): Sprawdzamy, czy produkt jest dostępny w magazynie. Jeśli nie jest dostępny, wykonujemy kod wewnątrz nawiasów klamrowych.
   • echo '<div class="wpziom-out-of-stock">';: Jeśli produktu nie ma w magazynie, otwieramy nowy div z klasą wpziom-out-of-stock.
3. add_action( 'woocommerce_after_shop_loop_item’, 'wpziom_close_out_of_stock_div’ );
   • 'woocommerce_after_shop_loop_item' to hak WooCommerce, który pozwala na dodanie zawartości po każdym produkcie na liście produktów.
4. function wpziom_close_out_of_stock_div() { … }
   • Definiujemy nową funkcję o nazwie wpziom_close_out_of_stock_div.
   • Jeśli produktu nie ma w magazynie, zamykamy wcześniej otwarty div.
5. add_action( 'woocommerce_before_shop_loop_item_title’, 'wpziom_display_stock_status’ );
   • 'woocommerce_before_shop_loop_item_title' to hak WooCommerce, który pozwala na dodanie zawartości przed tytułem produktu.
6. function wpziom_display_stock_status() { … }
   • Definiujemy nową funkcję o nazwie wpziom_display_stock_status.
   • Jeśli produktu nie ma w magazynie, wyświetlamy etykietę „Brak w magazynie” w elemencie <span>.

Kod CSS do informacji na labelu.

.wpziom-out-of-stock-label {
  background-color: red;
  color: white;
  padding: 5px 10px;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}

Kod CSS, który zastosowałem u klientki.

.wpziom-out-of-stock .wp-post-image, 
.wpziom-out-of-stock img {
    filter: grayscale(80%);
    opacity: 0.5;
}

.wpziom-out-of-stock-label {
    min-height: 0;
    min-width: 0;
    padding: .5em 1em;
    font-weight: 700;
    position: absolute;
    text-align: center;
    line-height: 1.2;
    top: 6px;
    left: 0.5rem;
    margin: 0;
    border-radius: .25rem;
    background-color: var(--global-palette2);
    color: var(--global-palette-highlight-alt2);
    font-size: 0.857em;
    z-index: 9;
}