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

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

1. Tytuły produktów:
   • min-height: 100px; zapewnia spójność.
   • display: flex; i align-items: center; centrują tekst.
2. Lista produktów:
   • display: flex; i flex-wrap: wrap; pozwalają na elastyczne rozmieszczenie.
3. 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' );

Podobny wpis: Ostatnie sztuki.