افزودن دکمه سفارشی به صفحه محصول

افزودن دکمه سفارشی به صفحه محصول – یکی از مهمترین صفحات سایت فروشگاهی شما، صفحه محصول می باشد که می توانید با سفارشی سازی آن امکانات بیشتری به این صفحه اضافه کنید و تعامل بیشتری با مشتریان داشته باشید.

از جمله تسریع در امر پشتیبانی در هنگام خرید، قرار دادن فایل آموزشی، ارائه پیشنهاد به مشتریان ، قرار دادن لینک دانلود و …

افزودن دکمه سفارشی به صفحه محصول

برای اینکار کافیست قطعه کد زیر را به فایل Functions.php قالب خود اضافه کنید.

add_action( 'woocommerce_single_product_summary', 'my_extra_button_on_product_page', 30 );

function my_extra_button_on_product_page() {
  echo '<a class= "extra_button" href="#">متن دکمه</a>';
}

برای استایل دهی به دکمه باید  کد های css زیر را در فایل style.css قالب خود اضافه کنید :

.extra_button{
display: inline-block;
background: #147427;
color: #fff;
height: 35px;
line-height: 35px;
padding: 0;
border-radius: 0;
border: 1px solid #e5e5e5;
padding: 0 20px 0 20px;
-webkit-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
font-family: IRANSans;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-indent: unset;
font-weight: 300;
font-size: 12px;
}
.extra_button:hover {
color: #fff;
background:#0063D1;
}

بعد از افزودن کد و ذخیره فایل می توانید نتیجه کار را در سایت مشاهده کنید

حال اگر نیاز به یک دکمه سفارشی نیاز دارید که باتوجه به محصول لینک های متفاوتی دارد میتوانید کدهای زیر را به فایل فانکشن اضافه کنید و از شورتکد زیر استفاده کنید. (با استفاده از کد زیر یک فیلد لینک به تب اصلی تنظمیمات محصول اضافه می شود).

[mybutton text="متن دکمه" class="extra_button"]

function add_custom_link_field() {
    global $woocommerce, $post;
    
    echo '<div class="options_group">';
    woocommerce_wp_text_input(
        array(
            'id'          => '_custom_link',
            'label'       => __( 'لینک دکمه', 'woocommerce' ),
            'placeholder' => 'https://example.com',
            'desc_tip'    => true,
            'description' => __( 'جهت عدم نمایش خالی بگذارید', 'woocommerce' ),
        )
    );
    
    echo '</div>';
}
add_action( 'woocommerce_product_options_general_product_data', 'add_custom_link_field' );

function save_custom_link_field( $post_id ) {
    $custom_link = isset( $_POST['_custom_link'] ) ? $_POST['_custom_link'] : '';
    update_post_meta( $post_id, '_custom_link', sanitize_text_field( $custom_link ) );
}
add_action( 'woocommerce_process_product_meta', 'save_custom_link_field' );


function custom_link_button_shortcode( $atts ) {
    $post_id = get_the_ID();
    $custom_link = get_post_meta( $post_id, '_custom_link', true );
    
    if ( empty( $custom_link ) ) {
        return false;
    }
    
    $button_text = isset( $atts['text'] ) ? $atts['text'] : 'متن دکمه';
    $button_class = isset( $atts['class'] ) ? 'class="' . $atts['class'] . '"' : '';
    
    return '<a href="' . esc_url( $custom_link ) . '" ' . $button_class . '>' . esc_html( $button_text ) . '</a>';
}
add_shortcode( 'mybutton', 'custom_link_button_shortcode' );

مطلب مرتبط : نمایش تعداد فروش محصول در ووکامرس

امیدواریم از خواندن این مقاله لذت برده باشید.

اگر نظری دارید میتوانید با ا به اشتراک بگذارید.