Show data on product loop woocommerce

julanjubalam

Active member
Trusted Uploader
Mar 3, 2019
227
249
43
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.
 

Knights

Member
Mar 7, 2021
57
29
18
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: 7
Last edited:
  • Love
Reactions: julanjubalam

julanjubalam

Active member
Trusted Uploader
Mar 3, 2019
227
249
43
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);
}
 

Knights

Member
Mar 7, 2021
57
29
18
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

julanjubalam

Active member
Trusted Uploader
Mar 3, 2019
227
249
43
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.
 

About us

  • Our community has been around for many years and pride ourselves on offering unbiased, critical discussion among people of all different backgrounds. We are working every day to make sure our community is one of the best.

Quick Navigation

User Menu