Jak Odmienić Wygląd Twojego Sklepu WooCommerce:
Stylizacja Tytułów Produktów Woocommerce

3 lutego, 2024
11:35 am

Klucz do lepszego WooCommerce: Stylizacja tytułów produktów

W dzisiejszym wpisie omawiamy jak poprawić wygląd sklepu WooCommerce. Naszym celem jest lepsza czytelność i estetyka listy produktów. Chcemy też poprawić doświadczenia użytkowników. Przedstawimy funkcję custom_woocommerce_product_title_setup. Dodajemy ją do functions.php w motywie WordPress. Dzięki niej tytuły produktów na liście stają się spójne wizualnie. Umożliwia to lepsze dostosowanie do różnej długości nazw.

Ulepszamy wyświetlanie produktów

Minimalna wysokość tytułów to jednakowa przestrzeń dla wszystkich tytułów. Zapobiega to „skakaniu” elementów na stronie.
Centrowanie tekstu poprawia estetykę krótkich nazw.
Lepsza organizacja produktów dzięki flexboxowi. Przyciski akcji są na jednej wysokości. To poprawia interakcję z użytkownikiem.

Analiza kodu

Tytuły produktów:
- min-height: 100px; zapewnia spójność.
- display: flex; i align-items: center; centrują tekst.
Lista produktów:
- display: flex; i flex-wrap: wrap; pozwalają na elastyczne rozmieszczenie.
Pojedynczy produkt:
- display: flex; i flex-direction: column; dla układu pionowego.
- justify-content: space-between; trzyma przyciski na dole.

Niewielkie zmiany mogą znacząco polepszyć sklep WooCommerce. Stają się bardziej przyjazne i dostępne. Zachęcam do eksperymentowania. Porady dotyczą stylizacji tytułów produktów WooCommerce pomogą w optymalizacji prezentacji produktów.

Podsumowując, kod można wkleić do pliku function.php, lub zainstalować wtyczkę Code Snippets, co moim zdaniem jest lepszym rozwiązaniem ponieważ w chwili aktualizacji motywu, jeśli nie stworzycie kopii zapasowej wasze funkcję przepadną.

WooCommerce: Stylizacja tytułów produktów

function custom_woocommerce_product_title_setup() {
    ?>
    <style>
        .woocommerce ul.products li.product .woocommerce-loop-product__title {
            min-height: 100px; /* Ustaw odpowiednią minimalną wysokość */
            display: flex;
            align-items: center; /* Centrowanie tekstu, jeśli jest krótszy */
        }
        .woocommerce ul.products {
            display: flex;
            flex-wrap: wrap;
        }
        .woocommerce ul.products li.product {
            display: flex;
            flex-direction: column;
            justify-content: space-between; /* Utrzymuje przyciski na dole */
        }
    </style>
    <?php
}

add_action( 'wp_head', 'custom_woocommerce_product_title_setup' );