• You MUST read the Babiato Rules before making your first post otherwise you may get permanent warning points or a permanent Ban.

    Our resources on Babiato Forum are CLEAN and SAFE. So you can use them for development and testing purposes. If your are on Windows and have an antivirus that alerts you about a possible infection: Know it's a false positive because all scripts are double checked by our experts. We advise you to add Babiato to trusted sites/sources or disable your antivirus momentarily while downloading a resource. "Enjoy your presence on Babiato"

Show data on product loop woocommerce

julanjubalam

Well-known member
Trusted Uploader
Mar 3, 2019
266
400
63
I'm trying to display message for customer for a date or schedule that's available in the near future in the product loop woocommerce.(Category, Archive, Shop)
I use this plugin Woocommerce Appointment for booking, and l want show this Settings on the backend for availability auto select and try to show on product loop.

I'm try to write some code and add to function.php, but there seems to be something wrong here.
add_action( 'woocommerce_after_shop_loop_item', 'wc_shop_page_product_date', 100 );
function wc_shop_page_product_date() {
$single_product_obj = get_wc_product_appointment( $single_product->post->ID );
echo '<span class="product">AVAILABLE at: ' . get_wc_product_appointment('d-m-Y', $single_product->post->ID) . '</span>';
}

I use
get_wc_product_appointment


to display it from here (found this on plugin)

-<wpml-config>
-<custom-types>
<custom-type translate="0">wc_appointment</custom-type>
</custom-types>
-<custom-fields>
<custom-field action="copy">_wc_appointment_availability</custom-field>
<custom-field action="copy">_wc_appointment_availability_autoselect</custom-field>
<custom-field action="copy">_wc_appointment_availability_span</custom-field>
<custom-field action="copy">_wc_appointment_cal_color</custom-field>
<custom-field action="copy">_wc_appointment_cancel_limit</custom-field>
<custom-field action="copy">_wc_appointment_cancel_limit_unit</custom-field>
<custom-field action="copy">_wc_appointment_duration</custom-field>
<custom-field action="copy">_wc_appointment_duration_unit</custom-field>
<custom-field action="copy">_wc_appointment_has_price_label</custom-field>
<custom-field action="translate">_wc_appointment_price_label</custom-field>
<custom-field action="copy">_wc_appointment_has_pricing</custom-field>
<custom-field action="copy">_wc_appointment_interval</custom-field>
<custom-field action="copy">_wc_appointment_interval_unit</custom-field>
<custom-field action="copy">_wc_appointment_max_date</custom-field>
<custom-field action="copy">_wc_appointment_max_date_unit</custom-field>
<custom-field action="copy">_wc_appointment_min_date</custom-field>
<custom-field action="copy">_wc_appointment_min_date_unit</custom-field>
<custom-field action="copy">_wc_appointment_padding_duration</custom-field>
<custom-field action="copy">_wc_appointment_padding_duration_unit</custom-field>
<custom-field action="translate">_wc_appointment_price_label</custom-field>
<custom-field action="copy">_wc_appointment_pricing</custom-field>
<custom-field action="copy">_wc_appointment_has_restricted_days</custom-field>
<custom-field action="copy">_wc_appointment_restricted_days</custom-field>
<custom-field action="copy">_wc_appointment_qty</custom-field>
<custom-field action="copy">_wc_appointment_qty_min</custom-field>
<custom-field action="copy">_wc_appointment_qty_max</custom-field>
<custom-field action="copy">_wc_appointment_requires_confirmation</custom-field>
<custom-field action="copy">_wc_appointment_staff_assignment</custom-field>
<custom-field action="translate">_wc_appointment_staff_label</custom-field>
<custom-field action="copy">_wc_appointment_user_can_cancel</custom-field>
<custom-field action="copy">_wc_appointment_customer_timezones</custom-field>
</custom-fields>
</wpml-config>

But I don't know how to do it to display it properly in product loop...
Any help is much appreciated, thx.

Plugin for i'm testing.
 
This should help point you in the right direction. Set your priority to ''1'' and Available = ''yes''. This will display the next available date on your product on the shop page and is pulled from the Custom Availability tab from your database.

I tried this with ''WHERE appointable = yes'' within the $wpdb->prepare, but for some reason the array wouldn't work. I didn't have time to dig further into it. You might also want to use the code for a specific product.

Code:
global $product;
if ( $product->get_id() != 1514 ) {
 
// rest of code etc.
 
}

You can edit and change to meet your needs:
Code:
// Add Availability to Product
add_action( 'woocommerce_after_shop_loop_item', 'show_next_availability_wc_appointments', 5 );
 
    function show_next_availability_wc_appointments() {
    if ( ! defined( 'ABSPATH' ) ) {
        exit; // Exit if accessed directly
    }
 
    global $product, $wpdb;
     
    $product_id = $product->get_id();
 
    //echo $product_id;
 
    $current_date = date("Y-m-j");
    $date1 = new DateTime('today');
 
    //echo $current_date;
 
    $result = $wpdb->get_results(
        $wpdb->prepare(
            "SELECT * FROM {$wpdb->prefix}wc_appointments_availability WHERE priority=1 AND kind_id = %d ORDER BY `from_range` ASC LIMIT 10", $product_id        )
    );
 
    $resultTable = [];
 
    foreach ($result as $terms) {
        array_push($resultTable, $terms->from_range, 'from_range');
    }
 
    // print_r($resultTable);
 
    $resultTable = array_filter($resultTable,function($date){
    return strtotime($date) >= strtotime('today');
    });
 
    if (!$resultTable) {
        // echo '<span class="product">No Dates Available</span><p></p>';
    } else {
        echo '<span class="product">Available at: ' . array_values($resultTable)[0] . '</span><p></p>';
    }
 
    // print_r($resultTable);
}
 

Attachments

  • example-394834.png
    example-394834.png
    33.2 KB · Views: 8
Last edited:
  • Love
Reactions: julanjubalam
Hi @Knights thank for your help.

That code run perfectly on product page, but it not show on product loop on shop page.

I don't know whats wrong with this.


But, thanks for your help. 🥰

This should help point you in the right direction. Set your priority to ''1'' and Available = ''yes''. This will display the next available date on your product on the shop page and is pulled from the Custom Availability tab from your database.

I tried this with ''WHERE appointable = yes'' within the $wpdb->prepare, but for some reason the array wouldn't work. I didn't have time to dig further into it. You might also want to use the code for a specific product.

Code:
global $product;
if ( $product->get_id() != 1514 ) {
 
// rest of code etc.
 
}

You can edit and change to meet your needs:
Code:
// Add Availability to Product
add_action( 'woocommerce_after_shop_loop_item', 'show_next_availability_wc_appointments', 5 );
 
    function show_next_availability_wc_appointments() {
    if ( ! defined( 'ABSPATH' ) ) {
        exit; // Exit if accessed directly
    }
 
    global $product, $wpdb;
    
    $product_id = $product->get_id();
 
    //echo $product_id;
 
    $current_date = date("Y-m-j");
    $date1 = new DateTime('today');
 
    //echo $current_date;
 
    $result = $wpdb->get_results(
        $wpdb->prepare(
            "SELECT * FROM {$wpdb->prefix}wc_appointments_availability WHERE priority=1 AND kind_id = %d ORDER BY `from_range` ASC LIMIT 10", $product_id        )
    );
 
    $resultTable = [];
 
    foreach ($result as $terms) {
        array_push($resultTable, $terms->from_range, 'from_range');
    }
 
    // print_r($resultTable);
 
    $resultTable = array_filter($resultTable,function($date){
    return strtotime($date) >= strtotime('today');
    });
 
    if (!$resultTable) {
        // echo '<span class="product">No Dates Available</span><p></p>';
    } else {
        echo '<span class="product">Available at: ' . array_values($resultTable)[0] . '</span><p></p>';
    }
 
    // print_r($resultTable);
}
 
Hi @Knights thank for your help.

That code run perfectly on product page, but it not show on product loop on shop page.

I don't know whats wrong with this.


But, thanks for your help. 🥰

No problem. I tested this on the /shop/ page and it displays on the products. Perhaps have a play and tweak the ''add_action( 'woocommerce_after_shop_loop_item'' at the top on the code. etc. to display it where you require it.
 

Attachments

  • example-28324.png
    example-28324.png
    35.3 KB · Views: 4
  • Love
Reactions: julanjubalam
Hi @Knights

Thanks for help.

Yeah I missed that, and it's been running really smoothly like a charm.
Can you help me with another little problem?


I changed the product carousel display with some css code for mobile display.
Generally, on the mobile display it will show 2 products per line (before : https://snipboard.io/zYW1nS.jpg).

And I want to be 1 product + next partial product per line, like here I’m displaying it for mobile display.(after add some css : https://snipboard.io/ecKVzg.jpg)

Normally, when a product is swiped, it will display the next product.
However, I’m having a problem, when the next product doesn’t display properly ( eg: when the carousel starts on product 1, it shifts to product 3 and so on.)

Please see the link below for the screen recording for more details.
(https://we.tl/t-qTjjdXwyRX) or you can see live here (Use Mobile Layout view to check this on desktop – https://bit.ly/3O7l2cL)

This is the css code I added
@media only screen and (max-width: 400px) {
.woocommerce ul.products {
margin-left: -10px;
margin-right: -80%;
}
@media only screen and (max-width: 400px) {
.woocommerce ul.products:not(.slick-slider) {
display: list-item;
flex-wrap: wrap;
overflow: scroll;
}

Thank you in advance.
Really appreciate for your help.
 
AdBlock Detected

We get it, advertisements are annoying!

However in order to keep our huge array of resources free of charge we need to generate income from ads so to use the site you will need to turn off your adblocker.

If you'd like to have an ad free experience you can become a Babiato Lover by donating as little as $5 per month. Click on the Donate menu tab for more info.

I've Disabled AdBlock