Wyświetlanie informacji o braku w magazynie w WooCommerce

Jak wyświetlić wiadomość brak w magazynie w WooCommerceWooCommerce pokazuje brak w magazynie na stronie produktuWyświetlanie tekstu brak w magazynie w WooCommerceBrak wiadomości brak w magazynie w WooCommerceDostosowanie wiadomości brak w magazynie w WooCommercePowiadomienie o braku w magazynie w WooCommerceWyświetlanie niedostępnych produktów w WooCommerceWooCommerce pokazuje brak w magazynie w kataloguJak dodać etykietę brak w magazynie w WooCommerceUstawienia wiadomości brak w magazynie w WooCommerce

Objaśnienie

Aby wyświetlić niestandardową wiadomość "brak w magazynie" na stronie produktu WooCommerce, ten kod spełnia swoje zadanie. Sprawdza, czy produkt jest niedostępny i wyświetla przyjazną wiadomość bezpośrednio na stronie produktu.

Oto, co robi:

Wiadomość na stronie produktu: Dodaje wiadomość informującą "Przykro nam, ten produkt jest obecnie niedostępny" bezpośrednio na stronie produktu, gdy przedmiot nie jest dostępny.
Widoczność w katalogu: Produkty niedostępne są nadal wyświetlane w Twoim katalogu, dzięki czemu klienci wiedzą, że istnieją, nawet jeśli nie mogą ich teraz kupić.
Etykieta w katalogu: W katalogu produktów dodaje widoczną etykietę "Brak w magazynie" do przedmiotów, które nie są dostępne, co ułatwia szybkie zorientowanie się w sytuacji.
Niższe stylizowanie: Wiadomość i etykieta są stylizowane na pogrubiony czerwony tekst, aby przyciągnąć uwagę, zapewniając, że klienci zauważą status dostępności.

Ta konfiguracja pomaga zarządzać oczekiwaniami klientów, jasno komunikując dostępność produktów, zarówno na poszczególnych stronach produktów, jak i w szerszym widoku katalogu.

Kod
<?php
// Hook into WooCommerce to display a custom out-of-stock message on the product page
add_action('woocommerce_single_product_summary', 'wp_dudecom_display_out_of_stock_message', 20);

function wp_dudecom_display_out_of_stock_message() {
    global $product;

    // Check if the product is out of stock
    if (!$product->is_in_stock()) {
        // Display a custom out-of-stock message
        echo '<p class="stock out-of-stock">' . esc_html__('Sorry, this product is currently out of stock.', 'woocommerce') . '</p>';
    }
}

// Ensure out-of-stock products are displayed in the catalog
add_filter('woocommerce_product_query_meta_query', 'wp_dudecom_include_out_of_stock_products_in_catalog');

function wp_dudecom_include_out_of_stock_products_in_catalog($meta_query) {
    // Remove the default meta query that hides out-of-stock products
    foreach ($meta_query as $key => $query) {
        if (isset($query['key']) && '_stock_status' === $query['key']) {
            unset($meta_query[$key]);
        }
    }
    return $meta_query;
}

// Add a custom label to out-of-stock products in the catalog
add_action('woocommerce_before_shop_loop_item_title', 'wp_dudecom_add_out_of_stock_label', 10);

function wp_dudecom_add_out_of_stock_label() {
    global $product;

    // Check if the product is out of stock
    if (!$product->is_in_stock()) {
        // Display a custom out-of-stock label
        echo '<span class="out-of-stock-label">' . esc_html__('Out of Stock', 'woocommerce') . '</span>';
    }
}

// Enqueue custom styles for the out-of-stock message and label
add_action('wp_enqueue_scripts', 'wp_dudecom_enqueue_custom_styles');

function wp_dudecom_enqueue_custom_styles() {
    wp_add_inline_style('woocommerce-general', '
        .stock.out-of-stock {
            color: #ff0000;
            font-weight: bold;
        }
        .out-of-stock-label {
            background-color: #ff0000;
            color: #ffffff;
            padding: 5px;
            display: inline-block;
            margin-top: 10px;
        }
    ');
}
?>

Instrukcja

Lokalizacja pliku: Dodaj poniższy kod do pliku functions.php swojego motywu lub do pliku własnej wtyczki.

Wymagania wstępne:

Upewnij się, że WooCommerce jest zainstalowane i aktywowane na Twojej stronie WordPress.

Kroki wdrożenia:

Uzyskaj dostęp do swojego panelu WordPress.
Przejdź do Wygląd > Edytor plików motywu, jeśli dodajesz kod do functions.php. Alternatywnie, użyj edytora kodu, jeśli pracujesz z plikiem własnej wtyczki.
Znajdź plik functions.php na liście plików motywu po prawej stronie lub otwórz plik swojej wtyczki.
Skopiuj i wklej podany fragment kodu do pliku.
Zapisz zmiany w pliku.
Odwiedź strony produktów WooCommerce oraz katalog, aby zweryfikować, czy komunikat i etykieta o braku towaru są wyświetlane poprawnie.

Jeśli napotkasz jakiekolwiek problemy lub potrzebujesz dalszej pomocy w zakresie tego wdrożenia lub bardziej zaawansowanej funkcjonalności, rozważ skontaktowanie się z wp-dude.com w celu uzyskania fachowej pomocy.