I'm creating a template for archive-product.php page in WooCommerce.

I would like to have 3 boxes and link each to a different product category.

How do I get dynamic link to each product category in <a> tag? For now I put static links, but I'm sure there is a way to make them dynamic in WordPress

Here's what my code looks like:

    <ul class="shop-items">
      <li class="fine-art">
        <a href="/">
         <div>Fine Art
          <span>Description</span>
          </div>
        </a>
       </li>
       <li class="dance-art">
        <a href="/">
         <div>Dance Art
          <span>Description</span>
          </div>
        </a>
       </li>
     <li class="history-art">
        <a href="/">
         <div>History Art
          <span>Description</span>
          </div>
        </a>
       </li>
 </ul>

I'm creating a template for archive-product.php page in WooCommerce.

I would like to have 3 boxes and link each to a different product category.

How do I get dynamic link to each product category in <a> tag? For now I put static links, but I'm sure there is a way to make them dynamic in WordPress

Here's what my code looks like:

    <ul class="shop-items">
      <li class="fine-art">
        <a href="http://url/product-category/categories/fine-art/">
         <div>Fine Art
          <span>Description</span>
          </div>
        </a>
       </li>
       <li class="dance-art">
        <a href="http://url/product-category/categories/dance-art/">
         <div>Dance Art
          <span>Description</span>
          </div>
        </a>
       </li>
     <li class="history-art">
        <a href="http://url/product-category/categories/history-art/">
         <div>History Art
          <span>Description</span>
          </div>
        </a>
       </li>
 </ul>

• php
• woocommerce-offtopic
• archive-template

2 Answers 2

For this purpose there is get_term_link function (documentation).

<a href="<?php echo get_term_link( 42 ,'product_cat') ?>">Fine Art ... etc.</a>

Product category is just WP taxonomy, so there is plenty of functions to work with. In this case you have to know your product category ID (taxonomy term ID, actually). When editing category, you will find it in URL: .../edit-tags.php?action=edit&taxonomy=product_cat&tag_ID=42&post_type=product

I am trying to do the same

<?php

class My_Dropdown_Category_Control extends WP_Customize_Control {

    public $type = 'dropdown-category';

    protected $dropdown_args = false;

    protected function render_content() {
        ?><label><?php

        if ( ! empty( $this->label ) ) :
            ?><span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span><?php
        endif;

        if ( ! empty( $this->description ) ) :
            ?><span class="description customize-control-description"><?php echo $this->description; ?></span><?php
        endif;

        $dropdown_args = wp_parse_args( $this->dropdown_args, array(
            'taxonomy'          => 'product_cat',
            'show_option_none'  => ' ',
            'selected'          => $this->value(),
            'show_option_all'   => '',
            'orderby'           => 'name',
            'order'             => 'ASC',
            'show_count'        => 1,
            'hide_empty'        => 1,
            'child_of'          => 0,
            'exclude'           => '',
            'hierarchical'      => 1,
            'depth'             => 0,
            'tab_index'         => 0,
            'hide_if_empty'     => false,
            'option_none_value' => 0,
            'value_field'       => 'term_id',
        ) );

        $dropdown_args['echo'] = false;

        $dropdown = wp_dropdown_categories( $dropdown_args );
        $dropdown = str_replace( '<select', '<select ' . $this->get_link(), $dropdown );
        echo $dropdown;

        ?></label><?php

    }
}


function olsen_light_child_customize_register( WP_Customize_Manager $wp_customize ) {
    require_once get_stylesheet_directory() . '/inc/dropdown-category.php';

    $wp_customize->add_section( 'homepage', array(
        'title' => esc_html_x( 'Test-Link', 'customizer section title', 'olsen-light-child' ),
    ) );

    $wp_customize->add_setting( 'home_slider_category', array(
        'default'           => 0,
        'sanitize_callback' => 'absint',
    ) );

    $wp_customize->add_control( new My_Dropdown_Category_Control( $wp_customize, 'home_slider_category', array(
        'section'       => 'homepage',
        'label'         => esc_html__( 'Slider posts category', 'olsen-light-child' ),
        'description'   => esc_html__( 'Select the category that the slider will show posts from. If no category is selected, the slider will be disabled.', 'olsen-light-child' ),
    ) ) );
}

add_action( 'customize_register', 'olsen_light_child_customize_register' );

but when I echo my the settings in my front page, many elements of my site dissapear..., any clue, thanks

<a href="<?php echo get_term_link(get_theme_mod(‘home_slider_category’))?>"><span><?php echo get_theme_mod('gs_slider_one_txt')?></span></a>