Ako presunúť popis produktu pod cenu vo WooCommerce

Napísal Marián Kohn, WordPress programátor

Čo tento snippet robí

WooCommerce štandardne schováva popis produktu do záložiek (tabs).

Tento kód:

  • odstráni tabs
  • zobrazí plný popis priamo pod cenou

Prečo to riešiť

  • lepšie UX
  • menej klikov
  • vyššia šanca na nákup
  • vhodné pre módu, služby, jednoduché produkty

Kód

// odstráni WooCommerce tabs
add_filter( 'woocommerce_product_tabs', '__return_empty_array' ); // presunie popis pod cenu
add_action( 'woocommerce_single_product_summary', 'mk_move_full_description_under_price', 25 );
function mk_move_full_description_under_price() {
    global $post;
    if ( ! $post instanceof WP_Post ) {
        return;
    }
    echo '<div class="custom-full-description">';
    echo apply_filters( 'the_content', $post->post_content );
    echo '</div>';
}

Kam to vložiť

  • functions.php (child theme)
  • alebo vlastný plugin

Čo otestovať

  • detail produktu
  • mobil vs desktop
  • dlhý popis (scroll)

CSS tip

.custom-full-description {
    margin-top: 20px;
    line-height: 1.6;
}

Pozor

  • prichádzaš o tabs (napr. Additional info, Reviews)
  • ak ich chceš → treba ich pridať inde

Alternatíva

Môžeš:

  • nechať tabs
  • ale pridať short description + CTA + key info hore

Záver

Tabs sú často UX zabijak.
Priamo zobrazený obsah → viac čítania → viac konverzií.

Marián Kohn – WordPress a WooCommerce developer

O autorovi

Volám sa Marián Kohn a pomáham firmám riešiť technické problémy na WordPress a WooCommerce weboch.

Špecializujem sa na opravy spadnutých webov, výkon, bezpečnosť a riešenie chýb, ktoré brzdia biznis.

Keď WordPress zlyhá, zasahujem.

Potrebujete pomoc? Ozvite sa

Vložiť komentár