Following the guide here http://www.w3bdeveloper.com/how-to/how-to-get-regular-price-of-a-product-in-wordpress-woocommerce/
Using the following code to call the price inside the loop, the price is displaying the wrong price per item.
The first item has no price, the second item has the first items price, the third item has the second price and so on.
<div class='price'>
<?php echo $product->regular_price; ?>
</div>
If I use <?php echo $product->get_price_html(); ?> it displays correctly, but I'd like to be able to display the sale price and the regular price separately. Also for some reason, if I use this code before the button code, I get a fatal error.
The loop code is as follows:
<div class='post'>
<a class='oxy-post-image' href='<?php the_permalink(); ?>'>
<div class='oxy-post-image-fixed-ratio' style='background-image: url(<?php echo get_the_post_thumbnail_url(); ?>);'></div>
<div class='price-overlay'>
<?php echo $product->regular_price; ?>
</div>
</a>
<div class='post-wrapper'>
<a class='oxy-post-title' href='<?php the_permalink(); ?>'><?php the_title(); ?></a>
<div class='oxy-post-meta'>
<div class='cart-button'>
<?php global $product; echo apply_filters( 'woocommerce_loop_add_to_cart_link',
sprintf( '%s',
esc_url( $product->add_to_cart_url() ),
esc_attr( $product->get_id() ),
esc_attr( $product->get_sku() ),
$product->is_purchasable() ? 'add_to_cart_button' : '',
esc_attr( $product->get_type() ),
esc_html( $product->add_to_cart_text() ) ),$product ); ?>
</div>
</div>
</div>
</div>
A screenshot of the items in the loop:
Try to declare global $product before using echo $product->regular_price; so :
<div class='price-overlay'>
<?php global $product; echo $product->regular_price; ?>
</div>
Related
Is it possible to display product variations on home page? I mean I dont want to go to product page to buy one. I just want to choose variation and click "buy now".
P.S. I use custom loop to display products on my home page.
<div <?php wc_product_class( 'product-item', $product ); ?>>
<figure class="product-thumbnail">
<a href="<?php echo $product->get_permalink() ?>">
<?php echo $product->get_image() ?>
</a>
<figcaption>
<span class="product-badge_sale">20%</span>
</figcaption>
</figure>
<div class="product-item_details">
<a href="<?php echo $product->get_permalink() ?>">
<span class="product-name"><?php echo $product->get_title() ?></span>
</a>
<div class="product-item_meta">
<div class="product-item_buy">
<?php if( $product->product_type == "simple" ): ?>
<a href="<?php echo $product->add_to_cart_url() ?>" value="<?php echo esc_attr( $product->get_id() ); ?>" class="ajax_add_to_cart add_to_cart_button" data-product_id="<?php echo get_the_ID(); ?>" data-product_sku="<?php echo esc_attr($sku) ?>" ><?php echo $product->add_to_cart_text() ?></a>
<?php endif; ?>
<?php if( $product->product_type == "variable" ): ?>
<?php woocommerce_variable_add_to_cart() ?>
<?php endif; ?>
</div>
<div class="product-price">
<?php echo $product->get_price_html() ?>
</div>
</div>
</div>
As you can see Im trying to check if the product type is "variable". When I use woocommerce_variable_add_to_cart() function it works only on archive page. But not in home page.
Some screentshot what I mean
Here is a piece of my code.
<div class="thim-course-grid">
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="lpr_course <?php echo 'course-grid-' . $columns; ?>">
**<div class="course-item" onmouseover="hide_card('<?= get_the_ID()?>');" onmouseout="show_card('<?= get_the_ID()?>');">**
<div class="course-thumbnail" id="course-thumbnail-<?= get_the_ID()?>">
<a href="<?php echo esc_url( get_the_permalink( get_the_ID() ) ); ?>">
<?php echo thim_get_feature_image( get_post_thumbnail_id( get_the_ID() ), 'full', $thumb_w, $thumb_h, get_the_title() ); ?>
</a>
<?php do_action( 'thim_inner_thumbnail_course' ); ?>
<!-- <a class="course-readmore"
href="<?php echo esc_url( get_the_permalink( get_the_ID() ) ); ?>"><?php echo esc_html__( 'Read More', 'eduma' ); ?></a> -->
</div>
<div class="thim-course-content" id="thim-course-content-<?= get_the_ID()?>">
<?php learn_press_courses_loop_item_instructor();
the_title( sprintf( '<h2 class="course-title">', esc_url( get_permalink() ) ), '</h2>' );
?>
<?php if ( class_exists( 'LP_Addon_Coming_Soon_Courses_Preload' ) && learn_press_is_coming_soon( get_the_ID() ) ): ?>
<div class="message message-warning learn-press-message coming-soon-message">
<?php esc_html_e( 'Coming soon', 'eduma' ) ?>
</div>
<?php else: ?>
<div class="course-meta">
<?php learn_press_courses_loop_item_instructor(); ?>
<?php thim_course_ratings(); ?>
<?php learn_press_courses_loop_item_students(); ?>
<?php thim_course_ratings_count(); ?>
<?php learn_press_courses_loop_item_price(); ?>
</div>
<?php learn_press_courses_loop_item_price(); ?>
<?php endif; ?>
<div class="course-readmore">
<?php esc_html_e( 'Read More', 'eduma' ); ?>
</div>
</div>
</div>
</div>
<?php
endwhile;
?>
</div>
On the 4th line, I wanted to truncate the course maps on mouse over, so that all the part of the map at the bottom of the image disappears, only to reappear when there is no more flyover. The result obtained is different from what I wanted.
I put the link to the site to see: www.formatine.com
And here is the JS part that I added as well.
function hide_card(id) {
document.getElementById('thim-course-content-'+id).style.display = 'none';
document.getElementById('course-thumbnail-'+id).innerHTML = "<?= wp_oembed_get( $media_intro ) ?>";
}
function show_card(id) {
document.getElementById('thim-course-content-'+id).style.display = 'block';
document.getElementById('course-thumbnail-'+id).style.display = 'block';
}
Do you have an idea for me please? Thank you.
Don't use "display: none" because once it has it, the element "disappears".
It is better for you, to then, if you want to include a video instead of the card, for example, do it by having both, one behind the other by default, if you "mouseover" display the code INSIDE of one, and on "mouseout", display the other.
<div class="mycard">
<div class="myinfoforthevideo"></div>
<div class="myvideo"></div>
</div>
You controll the events on mycard class, and hide myinfoforthevideo by default, on "mouseover", hide it and show then myvideo, and on "mouseout" hide myvideo and show myinfoforthevideo
You're hidding everything so now since its a width: 0/height: 0 let's say, you don't have any place to do the mouseover now.
Extra:
You can try flip cards as another option, like this:
https://codepen.io/Aoyue/pen/pLJqgE
Been looking for a solution for quite some time now, hopefully someone can help.
The problem:
I'm trying to make a custom product loop in a WP Bakery block (so far so good). The product loop will be added to the frontpage. I've managed to include a quantity field which worked well until I wanted to make it work on AJAX add to cart. Once I made it AJAX it only adds 1 product to cart (as if it doesn't read input from quantity). It seems that everything is working fine when on the product page, so maybe something has to be defined in the WP_Query?
The loop to be displayed on frontpage:
<?php
// Setup your custom query
$args = array( 'post_type' => 'product', 'orderby' => 'date' );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>
<div class="product-content-containers">
<a href="<?php echo get_permalink( $loop->post->ID ) ?>">
<div id="mobclear" style="background-image: url(<?php echo get_the_post_thumbnail_url($loop->post->ID);?>);" class="product-right-content">
</div>
</a>
<div id="descclear" class="product-left-content">
<h3 class="h5">
<a href="<?php echo get_permalink( $loop->post->ID ) ?>">
<?php the_title(); ?>
</a>
</h3>
<p><?php echo apply_filters( 'woocommerce_short_description', $product->post->post_excerpt ) ?></p>
<div>
<p><span class="woocommerce-Price-amount amount customamount"><?php echo $product->get_price(); ?> <span class="woocommerce-Price-currencySymbol"><?php echo get_woocommerce_currency_symbol(); ?></span> pr. stk.</span></p>
<form action="<?php echo esc_url( $product->add_to_cart_url() ); ?>" class="cart" method="post" enctype='multipart/form-data'>
<?php woocommerce_quantity_input(); ?>
<button type="submit" data-quantity="1" data-product_id="<?php echo $product->id; ?>"
class="button alt ajax_add_to_cart add_to_cart_button product_type_simple"><?php echo $label; ?></button>
</form>
</div>
</div>
</div>
<?php endwhile; wp_reset_query(); // Remember to reset ?>
You had some invalid use of $loop->post->ID which within the loop when you've declared the_post() would be simply $post->ID
Also, $product->id should be $product->get_ID() if you're using the latest WC version.
This below is working in my test.
// Setup your custom query
$args = array( 'post_type' => 'product', 'orderby' => 'date' );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); global $product;
?>
<div class="product-content-containers">
<a href="<?php echo get_permalink( $post->ID ) ?>">
<div id="mobclear" style="background-image: url(<?php echo get_the_post_thumbnail_url($post->ID);?>);" class="product-right-content">
</div>
</a>
<div id="descclear" class="product-left-content">
<h3 class="h5">
<a href="<?php echo get_permalink( $post->ID ) ?>">
<?php the_title(); ?>
</a>
</h3>
<p><?php echo apply_filters( 'woocommerce_short_description', $post->post_excerpt ) ?></p>
<div>
<p><span class="woocommerce-Price-amount amount customamount"><?php echo $product->get_price(); ?> <span class="woocommerce-Price-currencySymbol"><?php echo get_woocommerce_currency_symbol(); ?></span> pr. stk.</span></p>
<form action="<?php echo esc_url( $product->add_to_cart_url() ); ?>" class="cart" method="post" enctype='multipart/form-data'>
<?php woocommerce_quantity_input(); ?>
<button type="submit" data-quantity="1" data-product_id="<?php echo $product->get_ID(); ?>"
class="button alt ajax_add_to_cart add_to_cart_button product_type_simple"><?php echo $label; ?></button>
</form>
</div>
</div>
</div>
<?php endwhile; wp_reset_query(); // Remember to reset ?>
<script type="text/javascript">
jQuery('input[name="quantity"]').change(function(){
var q = jQuery(this).val();
jQuery('input[name="quantity"]').parent().next().attr('data-quantity', q);
});
</script>
I want to be able to show the current price and sale price if it exists within my WP_Query products loop. At the moment my code just replaces the current price with the sale price. I want an if statement that checks if the sale price is there or not. If it is I want to display both;
Here's my code;
<?php
$args = array(
'post_type' => 'product',
'meta_key' => 'total_sales',
'orderby' => 'meta_value_num',
'posts_per_page' => 4,
);
$query = new WP_Query( $args );
?>
<?php if($query->have_posts()): ?>
<div class="container" id="best_sellers">
<div class="row">
<?php while( $query->have_posts() ): $query->the_post(); ?>
<?php $product = wc_get_product(get_the_ID());?>
<div class="col-md-3">
<div class="cont">
<a href="<?php the_permalink(); ?>">
<div class="image_cont">
<?php the_post_thumbnail(); ?>
</div>
<p class="sku"><?php echo $product->get_sku(); ?></p>
<p class="title"><?php the_title(); ?></p>
</a>
<div class="quantity">
<p>Quantity: </p>
<button class="increment">+</button>
<input type="text" value="1" min="1" max="<?php echo $product->get_stock_quantity(); ?>">
<button class="decrement">-</button>
</div>
<p class="price"><?php echo wc_price( wc_get_price_including_tax( $product ) ); ?></p>
Add to Basket
</div>
</div>
<?php endwhile; ?>
</div>
</div>
<?php endif; ?>
If you look at the price class you can see my code for getting the price.
update: I have been looking through the WooCommerce templates files and found this;
<?php if ( $product->is_on_sale() ) : ?>
This works, I just need to be able to grab both prices separately as at the moment
<?php echo wc_price( wc_get_price_including_tax( $product ) ); ?>
just gets overwritten by the sale price
Do you mean regular and sale prices?
You can work with below code but this will only with simple product, it won't work on product variation.
global $product;
if( $product->is_on_sale() ) {
$sale_price = $product->get_sale_price();
}
$regular_price = $product->get_regular_price();
I managed to find this
<?php echo $product->get_price_html(); ?>
It does everything I wanted without having to make an if statement
If you want to get the sale price with taxes, try this:
$sale_price = wc_get_price_to_display( $product, array( 'price' => $product->get_sale_price()) );
You will have to prefix the currency which can be achieved via get_woocommerce_currency_symbol()
Does somebody know, where I can find the .php file in woocommerce, where I can remove the word "item" or "items" from the last span?
I've tried it with some jQuery Code but it only works when I load the page completely. When I click add to cart or remove from cart an item, the cart only reload in woocommerce without my .js file to remove the two words.
Can anybody help me?
Thank you
$('.count').html($('.count').html().replace(' items',''));
$('.count').html($('.count').html().replace(' item',''));
<a class="cart-contents" href="http://*****.de/warenkorb/" title="View your shopping cart">
<span class="amount">0,00 €</span>
<span class="count">0 items</span><!--Here I want to remove the Word items to show just the number-->
</a>
After a few days of breaking my head about this i've found a solution (I'm so happy and angry too because when you know the answer the solution is so easy).
First you have to find the file woocommerce/templates/cart/mini-cart.php to overwrite our function.
When you've found it you have to find following line:
<?php echo apply_filters( 'woocommerce_widget_cart_item_quantity', '<span class="quantity">' . sprintf( '%s × %s', $cart_item['quantity'], $product_price ) . '</span>', $cart_item, $cart_item_key ); ?></li>
After you've found it you have to insert following code under the line:
<?php
add_filter( 'woocommerce_add_to_cart_fragments', 'woocommerce_header_add_to_cart_fragment' );
function woocommerce_header_add_to_cart_fragment( $fragments ) {
ob_start();
?>
<a class="cart-contents" href="<?php echo esc_url( WC()->cart->get_cart_url() ); ?>" title="<?php _e( 'View your shopping cart', 'storefront' ); ?>">
<span class="count"><?php echo sprintf (_n( '%d', WC()->cart->get_cart_contents_count() ), WC()->cart->get_cart_contents_count() ); ?></span>
</a>
<?php
$fragments['a.cart-contents'] = ob_get_clean();
return $fragments;
}
?>
Now you have to save the file and reload the page and put something in your cart (or remove) to update your cart. Know it should be done! :-)
If you want to add your price to the header too you also have to add above <span class="count"> following lines of code:
<span class="amount"><?php echo wp_kses_data( WC()->cart->get_cart_subtotal() ); ?></span>
If you have any questions you can always comment me…
To avoid the risk of these adjustments being overwritten if you update Storefront, you can also rewrite the function in your functions.php file like this:
if ( ! function_exists( 'storefront_cart_link' ) ) {
function storefront_cart_link() {
?>
<a class="cart-contents" href="<?php echo esc_url( wc_get_cart_url() ); ?>" title="<?php esc_attr_e( 'View your shopping cart', 'storefront' ); ?>">
<?php /* translators: %d: number of items in cart */ ?>
<?php echo wp_kses_post( WC()->cart->get_cart_subtotal() ); ?> <span class="count"><?php echo WC()->cart->get_cart_contents_count(); ?></span>
</a>
<?php
}
}