Zmień układ strony sklepu na pełną szerokość w WordPressie

Jak ustawić stronę sklepu na pełną szerokość w WordPressieZmień układ sklepu WordPress na pełną szerokośćUstaw stronę produktu WooCommerce na pełną szerokośćUkład pełnej szerokości dla strony sklepu WordPressUstaw stronę sklepu WordPress na pełną szerokośćUstawienia strony produktu WooCommerce na pełną szerokośćPoradnik dotyczący pełnej szerokości strony sklepu WordPressDostosuj stronę sklepu do pełnej szerokości w WordPressiePrzewodnik po stronie sklepu o pełnej szerokości w WordPressiePrzekształć stronę sklepu WordPress na pełną szerokość

Objaśnienie

Chcesz, aby strona Twojego sklepu WooCommerce była pełnoekranowa? Oto prosty sposób, aby to osiągnąć!

Co to robi:

Usuwa pasek boczny z Twoich stron sklepu, dając więcej miejsca na Twoje produkty.
Dostosowuje główny obszar treści, aby zajmował całą szerokość strony.

Jak to działa:

Kod sprawdza, czy znajdujesz się na stronie sklepu, kategorii produktów lub tagu produktu.
Jeśli tak, usuwa pasek boczny, zapobiegając jego załadowaniu.
Następnie dodaje niestandardowy CSS, aby główny obszar treści rozciągał się na całą szerokość strony.

Co musisz zrobić:

Skopiuj kod do pliku functions swojego motywu.
To wszystko! Twoje strony sklepu powinny teraz być pełnoekranowe.

To podejście jest świetne do prezentacji Twoich produktów bez rozpraszania uwagi. Ciesz się nowym, przestronnym układem sklepu!

Kod
// Function to make WooCommerce store page full width
function wp_dudecom_make_store_page_full_width() {
    if (is_shop() || is_product_category() || is_product_tag()) {
        // Remove sidebar
        remove_action('woocommerce_sidebar', 'woocommerce_get_sidebar', 10);

        // Add custom CSS to make the content area full width
        add_action('wp_enqueue_scripts', 'wp_dudecom_add_full_width_css');
    }
}
add_action('wp', 'wp_dudecom_make_store_page_full_width');

// Function to enqueue custom CSS for full width layout
function wp_dudecom_add_full_width_css() {
    $custom_css = "
        .woocommerce-page #primary {
            width: 100%;
            float: none;
        }
        .woocommerce-page #secondary {
            display: none;
        }
    ";
    wp_add_inline_style('woocommerce-general', $custom_css);
}

Instrukcja

Lokalizacja pliku: functions.php (w Twoim aktywnym motywie) lub plik niestandardowej wtyczki.

Wymagania wstępne:

Upewnij się, że WooCommerce jest zainstalowane i aktywowane na Twojej stronie WordPress.
Miej dostęp do plików motywu WordPress lub wiesz, jak stworzyć niestandardową wtyczkę.

Kroki wdrożenia:

Dostęp do plików motywu: Zaloguj się do panelu administracyjnego WordPress. Przejdź do Wygląd > Edytor motywu. Wybierz plik functions.php z prawej strony.
Utwórz kopię zapasową pliku: Przed wprowadzeniem jakichkolwiek zmian, warto skopiować istniejącą zawartość pliku functions.php i zapisać ją w bezpiecznym miejscu.
Wstaw kod: Przewiń na dół pliku functions.php i wklej podany kod.
Zapisz zmiany: Kliknij przycisk Aktualizuj plik, aby zapisać zmiany.
Zweryfikuj zmiany: Odwiedź stronę swojego sklepu WooCommerce, aby upewnić się, że układ jest teraz pełnoekranowy bez paska bocznego.

Jeśli napotkasz jakiekolwiek problemy lub potrzebujesz dalszej pomocy, rozważ skontaktowanie się z wp-dude.com w celu uzyskania fachowej pomocy w zakresie wdrożenia WordPress lub zaawansowanych funkcji.