Horje
Shortcode not working on AJAX call - Wordpress Solution
Hi, I have an AJAX call to load featured products and any user can navigate on them with a previous and next buttons. That is working fine but when I use a shortcode inside of the loop in the AJAX call is displaying as a string instead of showing up correctly. JS

jQuery(document).ready(function ($) {
    var offset= 0;
    loadCurrentPage();
    jQuery("#cargaNext, #cargaPrev").click(function(e){
        offset = (jQuery(this).attr('id')=='cargaNext') ? offset + 4 : offset - 4;
        if (offset < 0){
            offset = 0;
        }else{
            loadCurrentPage();
        }
        e.preventDefault();
    });
    function loadCurrentPage(){
        jQuery.ajax({
            type: "post",
            url: ajax_var.url,
            data : {
                action: ajax_var.action, 
                nonce : ajax_var.nonce, 
                offset: offset
            },
            success: function(result){
                if(result){
                    //console.log(offset);
                    if(offset <= 0){
                        jQuery('#cargaPrev').addClass('disabled');    
                    }else{
                        jQuery('#cargaPrev').removeClass('disabled');    
                    }
                    jQuery('#cargaNext').removeClass('disabled');
                    jQuery('#listar-productos').html(result);
                }else{
                    jQuery('#cargaNext').addClass('disabled');
                    jQuery('#listar-productos').html('<div class="col-12 text-center"><p>Lo sentimos, no hay más productos para cargar</p></div>');
                }
            }
        });
    }
});
Functions.php

//AJAX PRODUCTOS - JS
function my_load_scripts() {
    wp_register_script('producto-ajax', get_theme_file_uri( 'js/productos-ajax.js'), array('jquery'));
    wp_enqueue_script( 'producto-ajax', get_theme_file_uri( 'js/productos-ajax.js'), array('jquery'), filemtime(get_stylesheet_directory(). '/js/productos-ajax.js') );
    wp_localize_script( 'producto-ajax', 'ajax_var', array(
        'url'    => admin_url( 'admin-ajax.php' ),
        'nonce'  => wp_create_nonce( 'my-ajax-nonce' ),
        'action' => 'event-list',
        'offset' => isset($_POST['offset']),
    ) );
}
add_action( 'wp_enqueue_scripts', 'my_load_scripts' );

// AJAX PRODUCTOS - TEMPLATE
function cargar_productos() {
    $nonce = sanitize_text_field( $_POST['nonce'] );
    if ( ! wp_verify_nonce( $nonce, 'my-ajax-nonce' ) ) {
        die ();
    }
    
    $offset = $_POST['offset'];

    $args = array(
        'post_type' => 'product',
        'post_status' => 'publish',
        'posts_per_page' => 4,
        'order' => 'DESC',
        'offset' => $offset
    );
    $query = new WP_Query( $args );
    if ( $query->have_posts() ):
        while ($query->have_posts()):
            $query->the_post();
            wc_get_template_part( 'content', 'product' );
        endwhile;
    endif;
    wp_die();
}
add_action( 'wp_ajax_event-list', 'cargar_productos' );
add_action( 'wp_ajax_nopriv_event-list', 'cargar_productos' );
Template Part

<div class="col-6 col-lg-3 mb-5">
                <div class="card rounded-lg">
                    <div class="card-body text-center">
                        <a rel="nofollow" href="<?php echo esc_url( get_permalink( $product->get_id() ) ); ?>">
						<?php echo $product->get_image('woocommerce_thumbnail', array('class' => 'img-fluid')); ?>
                        </a>
                    </div>
                    <div class="card-body pt-0">
                      <a rel="nofollow" class="card-text" href="<?php the_permalink();?>"><?php echo $product->get_title(); ?> <?php //echo apply_filters( 'woocommerce_short_description', $post->post_excerpt )?></a>
                      
                    </div>
                    <div class="card-body border-top d-flex justify-content-between">
                    <div class="d-flex justify-content-center w-100 flex-column flex-md-row">
                          <?php echo do_shortcode('[yith_ywraq_button_quote]');?>
                          <?php do_action( 'woocommerce_after_shop_loop_item' );?>
                      </div>
					           
                    </div>
                  </div>
            </div>
Anyone knows how to solve that?

Solution - 1

Are you using elementor ? [yith_ywraq_button_quote] shortcode works in premium version only. do you have free or premium version? can you try putting shortcode in page or post directly and see if get any result or not? few more details in documentation Make sure you enter the product’s ID with the parameter “product” to link the button to the right product in your WooCommerce. For example: [yith_ywraq_button_quote product="1234"] will let your users add product with ID 1234 to the cart. However, it is not necessary to enter the product ID when using the shortcode on a standard WooCommerce product page, as it will automatically link the button to the product it belongs to.


Solution - 2

can you please show me url of your site?


Solution - 3

Hello Alonso, Could you change the template part to this code


<div class="col-6 col-lg-3 mb-5">
<div class="card rounded-lg">
<div class="card-body text-center">
<a rel="nofollow" href="<?php echo esc_url( get_permalink( $product->get_id() ) ); ?>">
<?php echo $product->get_image('woocommerce_thumbnail', array('class' => 'img-fluid')); ?>
</a>
</div>
<div class="card-body pt-0">
<a rel="nofollow" class="card-text" href="<?php the_permalink();?>"><?php echo $product->get_title(); ?> <?php //echo apply_filters( 'woocommerce_short_description', $post->post_excerpt )?></a>

</div>
<div class="card-body border-top d-flex justify-content-between">
<div class="d-flex justify-content-center w-100 flex-column flex-md-row">
<?php echo do_shortcode('[yith_ywraq_button_quote product="' . $product->get_id() . '"]');?>
<?php do_action( 'woocommerce_after_shop_loop_item' );?>
</div>

</div>
</div>
</div>





Wordpress

Related
Extent the_post_thumbnail() function with a third parameter - Wordpress Solution Extent the_post_thumbnail() function with a third parameter - Wordpress Solution
Load plugin only on woocommerce product pages - Wordpress Solution Load plugin only on woocommerce product pages - Wordpress Solution
I want to display same font-size in Event calendar - Wordpress Solution I want to display same font-size in Event calendar - Wordpress Solution
Image not showing when sharing a link on LinkedIn - Wordpress Solution Image not showing when sharing a link on LinkedIn - Wordpress Solution
sticky post / pagination - Wordpress Solution sticky post / pagination - Wordpress Solution

Type:
Code Example
Category:
Coding
Sub Category:
Code Example
Uploaded by:
Admin
Views:
19