Unfortunately, I am doing something wrong. I have a function. In this function the hamburger menu is displayed. I still want to show the search icon under the menu. But as soon as I add the a tag and no span the search icon is shown somewhere under the menu see photo. But if I change the a tag to a span then the search button does not work anymore. What am I doing wrong. Can someone help me.
if ( ! function_exists( 'tonda_select_get_mobile_navigation_icon_html' ) ) {
/**
* Loads mobile navigation icon HTML
*/
function tonda_select_get_mobile_navigation_icon_html() {
$mobile_icon_icon_source = tonda_select_options()->getOptionValue( 'mobile_icon_icon_source' );
$mobile_icon_icon_pack = tonda_select_options()->getOptionValue( 'mobile_icon_icon_pack' );
$mobile_icon_svg_path = tonda_select_options()->getOptionValue( 'mobile_icon_svg_path' );
$mobile_navigation_icon_html = '';
if ( ( $mobile_icon_icon_source == 'icon_pack' ) && ( isset( $mobile_icon_icon_pack ) ) ) {
$mobile_navigation_icon_html .= tonda_select_icon_collections()->getMobileMenuIcon($mobile_icon_icon_pack);
} else if ( $mobile_icon_icon_source == 'predefined' ) {
$mobile_navigation_icon_html .= '<span class="qodef-mm-icons-columns">';
$mobile_navigation_icon_html .= '<span class="qodef-mm-icons col1">';
$mobile_navigation_icon_html .= '<span class="qodef-mm-line qodef-mm-line-1"></span>';
$mobile_navigation_icon_html .= '<span class="qodef-mm-line qodef-mm-line-2"></span>';
$mobile_navigation_icon_html .= '<span class="qodef-mm-line qodef-mm-line-3"></span>';
$mobile_navigation_icon_html .= '</span>';
$mobile_navigation_icon_html .= '<span class="qodef-mm-icons col2">';
$mobile_navigation_icon_html .= '<a class="qodef-search-opener qodef-icon-has-hover qodef-search-opener-icon-pack" href="javascript:void(0)">
<span class="qodef-search-opener-wrapper">
<span aria-hidden="true" class="qodef-icon-font-elegant icon_search "></span> </span>
</a>';
$mobile_navigation_icon_html .= '</span>';
$mobile_navigation_icon_html .= '</span>';
} else if ( isset( $mobile_icon_svg_path ) ) {
$mobile_navigation_icon_html .= $mobile_icon_svg_path;
}
return $mobile_navigation_icon_html;
}
}
Related
I want to display product shipping class label(character) instead its id(number). I mean, as seen in the image below, I wnat to chage 0 to Free or flat-rage etc. How or where do I have to edit under the relevant code below? Can I be helped by anybody professional?
enter image description here
The relevant code is
if ($sale_carousel_items_content) {
$carousel_items .= '<ul class="products" style="background:yellow; border:none; padding-left:50px;">';
enter code here
foreach ($sale_carousel_items_content as $item) {
if ( isset( $item['product_id'] ) ) {
$product = new WC_Product( $item['product_id'] );
if ( $product->is_on_sale() ) {
$countdown_container_id = uniqid('countdown',false);
$target = explode("-", $item['target_date']);
$carousel_items .= '<li class="row"><div class="img-wrapper col-xs-12 col-md-6">';
$carousel_items .= ''.$product->get_image( 'shop_catalog' ).'';
$carousel_items .= '<h6>'.$product->get_shipping_class_id().'</h6></div>';
$carousel_items .= '<div class="counter-wrapper col-xs-12 col-md-6"><h6>'.$product->get_name().'</h6>';
// Short Description
$carousel_items .= '<div class="woocommerce-product-details__short-description"><h6>'.$product->get_short_description().'</h6>';
// Sale value in percents
$percentage = round( ( ( $product->get_regular_price() - $product->get_sale_price() ) / $product->get_regular_price() ) * 100 );
$carousel_items .= '<span class="sale-value" style="background:orange;"><font style="font-size:15px;">특판가 </font>-'.$percentage.'% </span>';
$carousel_items .= '<div><h5></h5>';
$carousel_items .= '<div class="price-wrapper"><h5>남은수량: '.$product->get_stock_quantity().'개</h5>';
//$carousel_items .= '<div class="countdown-wrapper">';
if ( $item['pre_countdown_text'] && $item['pre_countdown_text'] != '' ) {
$carousel_items .= '<p>'.esc_attr($item['pre_countdown_text']).'</p>';
}
//$carousel_items .= '<div id="'.$countdown_container_id.'"></div></div>';
//$carousel_items .= '<div class="price-wrapper">'.do_shortcode('[add_to_cart id="'.$item['product_id'].'"]').'</div>';
if ( $target && $target!='' ) {
$carousel_items .='
<script type="text/javascript">
(function($) {
$(document).ready(function() {
var container = $("#'.$countdown_container_id.'");
var newDate = new Date('.$target[0].', '.$target[1].'-1, '.$target[2].');
container.countdown({
until: newDate,
});
});
})(jQuery);
</script>';
}
$carousel_items .= '</div></li>';
}
}
}
$carousel_items .= '</ul>';
}
Final update
Use the following to get the term name (label name) from a product shipping class Id:
$term_id = (int) $product->get_shipping_class_id(); // Get the shipping class Id
$term_name = ''; // Initializing
if( $term_id > 0 ) {
$term = get_term( $term_id, 'product_shipping_class' );
if( is_a( $term, 'WP_Term') ) {
$term_name = $term->name;
}
}
// testing output
echo '<h6>'. $term_name .'</h6>';
So in your code replace the line
$carousel_items .= '<h6>'.$product->get_shipping_class_id().'</h6></div>';
by the following code block:
$shipping_class_id = (int) $product->get_shipping_class_id(); // Get shipping class Id
$shipping_class_name = ''; // Initializing
if ( $shipping_class_id > 0 ) {
$shipping_class_term = get_term( $shipping_class_id, 'product_shipping_class' ); // Get the WP_Term Object
if ( is_a( $shipping_class_term, 'WP_Term') ) {
$shipping_class_name = $shipping_class_term->name; // The label name (term name)
}
}
$carousel_items .= '<h6>'.$shipping_class_name.'</h6></div>'; // Add to output
Tested and works.
I have a woocommerce cart icon in my main navigation. I want that icon to show a if the cart has items in it. If not that would be removed. I have tried the code below and it does not do what I intended it to. Ideas?
if($items_txt = $count_value === 1 ){
$html .= '<span class="xoo-wsc-sc-count">1</span>';}
elseif($items_txt = $count_value === 0 ){
$html .= '';}
Here is the full original code snippet.
<?php
// If this file is called directly, abort.
if ( ! defined( 'WPINC' ) ) {
die;
}
$sy_options = get_option('xoo-wsc-sy-options');//Style options
$options = get_option('xoo-wsc-gl-options');
$count_type = isset( $options['bk-count-type']) ? $options['bk-count-type'] : 'qty_count'; //Count Type
$cart_items_total = wc_price(WC()->cart->subtotal);
$bk_cubi = isset( $sy_options['bk-cubi']) ? $sy_options['bk-cubi'] : ''; // Custom basket icon
if( !$bk_cubi ){
$bk_bit = isset( $sy_options['bk-bit']) ? $sy_options['bk-bit'] : 'xoo-wsc-icon-basket1'; // Basket Icon Type
}
$html = '<a class="xoo-wsc-sc-cont">';
if( $bk_cubi ){
$html .= '<img src="'.$bk_cubi.'" class="xoo-wsc-sc-icon">';
}
else{
$html .= '<span class="xoo-wsc-sc-icon '.$bk_bit.'"></span>';
}
if($count_type == 'qty_count'){
$count_value = WC()->cart->get_cart_contents_count();
}
elseif($count_type == 'item_count'){
$count_value = count(WC()->cart->get_cart());
}
$items_txt = $count_value === 1 ? __('item','side-cart-woocommerce') : __('items','side-cart-woocommerce');
$html .= '<span class="xoo-wsc-sc-count">'.'</span>';
//$html .= '<span class="xoo-wsc-sc-count">'.$count_value.'</span>';
//$html .= '<span class="xoo-wsc-sc-total">'.$cart_items_total.'</span>';
$html .= '</a>';
echo $html;
I think if you change this if:
if( $bk_cubi ){
$html .= '<img src="'.$bk_cubi.'" class="xoo-wsc-sc-icon">';
}
else{
$html .= '<span class="xoo-wsc-sc-icon '.$bk_bit.'"></span>';
}
To:
if ($bk_cubi)
{
$html .= '<img src="'.$bk_cubi.'" class="xoo-wsc-sc-icon">';
}
else
{
if($count_value == 1 )
{
$html .= '<span class="xoo-wsc-sc-count">1</span>';
}
}
You'll get what you want.
Also, a single = is assignment operator. == is for checking whether values are equal to one another.
You can use the woocommerce_add_to_cart_fragments hook to check real-time woocommerce cart items.
add_filter( 'woocommerce_add_to_cart_fragments', 'woo_cart_icon_count' );
function woo_cart_icon_count( $fragments ) {
$cart_count = WC()->cart->cart_contents_count;
if($cart_count > 0) {
// your code here
}
}
For more detail, you can check the tutorial here.
I am working on project and I need some group help.
I am using woocommerce product system and on shop archive page product I am showing attribute-label: attribute-value (just like text).
attribute-label:attribute-value (ex. Transmission: Manual)
Is there a way to show attribute-label as image? I can't add html code like <img src..."/> and styling with CSS doesn't help too.
I have searched for plugins and more.. But nothing on web.
To show attributes on product shop page i have used this function:
function isa_woocommerce_all_pa(){
global $product;
$attributes = $product->get_attributes();
if ( ! $attributes ) {
return;
}
$out = '<ul class="custom-attributes">';
foreach ( $attributes as $attribute ) {
// skip variations
if ( $attribute->get_variation() ) {
continue;
}
$name = $attribute->get_name();
if ( $attribute->is_taxonomy() ) {
$terms = wp_get_post_terms( $product->get_id(), $name, 'all' );
// get the taxonomy
$tax = $terms[0]->taxonomy;
// get the tax object
$tax_object = get_taxonomy($tax);
// get tax label
if ( isset ( $tax_object->labels->singular_name ) ) {
$tax_label = $tax_object->labels->singular_name;
} elseif ( isset( $tax_object->label ) ) {
$tax_label = $tax_object->label;
// Trim label prefix since WC 3.0
if ( 0 === strpos( $tax_label, 'Product ' ) ) {
$tax_label = substr( $tax_label, 8 );
}
}
$out .= '<li class="' . esc_attr( $name ) . '">';
$out .= '<span class="attribute-label">' . esc_html( $tax_label ) . ': </span> ';
$out .= '<span class="attribute-value">';
$tax_terms = array();
foreach ( $terms as $term ) {
$single_term = esc_html( $term->name );
// Insert extra code here if you want to show terms as links.
array_push( $tax_terms, $single_term );
}
$out .= implode(', ', $tax_terms);
$out .= '</span></li>';
} else {
$value_string = implode( ', ', $attribute->get_options() );
$out .= '<li class="' . sanitize_title($name) . ' ' . sanitize_title( $value_string ) . '">';
$out .= '<span class="attribute-label">' . $name . ': </span> ';
$out .= '<span class="attribute-value">' . esc_html( $value_string ) . '</span></li>';
}
}
$out .= '</ul>';
echo $out;
}
add_action('woocommerce_single_product_summary', 'isa_woocommerce_all_pa', 25);
Can someone help me with this? How to change attribute-label with image?
Updated since WC 3.2+
As Product attributes dont have images, you should create a in your active theme a folder images (if it doesn't exist) and inside a subfolder attributes.
For each product attribute, you will have to add an image inside this subfolder attributes, which name will be the name of your attribute (the slug). For example for "Color" attribute you will have to add an image named color.jpg.
Then I have make some changes in your code, to get this working. Only the terms set in the product for each attribute will be displayed. For each attribute you will get an image.
Here is the code:
add_action('woocommerce_single_product_summary', 'isa_woocommerce_all_pa', 25);
function isa_woocommerce_all_pa(){
global $product;
$attributes = $product->get_attributes();
if ( ! $attributes ) return;
$out = '<ul class="custom-attributes">';
foreach ( $attributes as $attribute ) {
if ( $attribute->get_variation() ) continue; // skip variations
if ( $attribute->is_taxonomy() ) {
$taxonomy = $attribute->get_name();
$taxo_obj = $attribute->get_taxonomy_object();
$name = $taxo_obj->attribute_name; // <== Corrected
$label = $taxo_obj->attribute_label; // <== Corrected
$out .= '<li class="' . esc_attr( $taxonomy ) . '">';
## ATTRIBUTE IMAGE ##
// For a child theme use get_stylesheet_directory_uri() instead.
$out .= '<img class="attribute-image" src="'.get_template_directory_uri().'/images/attributes/'.$name.'.jpg" alt="Attribute '.$label.'"/> ';
$out .= '<span class="attribute-values">';
$terms = wp_get_post_terms( $product->get_id(), $taxonomy, array('fields' => 'names') );
foreach ( $terms as $term_name )
$term_names['name'] = $term_name;
$out .= implode(', ', $term_names);
$out .= '</span></li>';
} else {
$value_string = implode( ', ', $attribute->get_options() );
$out .= '<li class="' . sanitize_title($taxonomy) . ' ' . sanitize_title( $value_string ) . '">';
$out .= '<span class="attribute-label">' . $taxonomy . ': </span> ';
$out .= '<span class="attribute-value">' . esc_html( $value_string ) . '</span></li>';
}
}
$out .= '</ul>';
echo $out;
}
Code goes in function.php file of your active child theme (or theme) or also in any plugin file.
This code is tested and work.
I'm trying to figure out how to pull the featured post image as a background (on Wordpress) but cannot get it to work.
See below the code I'm using. $thumbimg should be pulling the featured image but obviously i am doing something wrong there.
$lessons = get_posts( $args );
if( count( $lessons ) > 0 ) {
$html .= '<section class="module-lessons">';
$html .= '<header><h3>' . __( 'Lessons', 'sensei_modules' ) . '</h3></header>';
$thumbimg = wp_get_attachment_image_src( get_post_thumbnail_id($lesson->ID), array( 200,200 ), false, '' );
$html .= '<ul>';
foreach( $lessons as $lesson ) {
$html .= '<li class="lesson-items" style="background: url(<?php echo $thumbimg[0]; ?>)>';
$html .= '' . get_the_title( intval( $lesson->ID ) ) . '';
$html .= '</li>';
// Build array of displayed lesson for exclusion later
$displayed_lessons[] = $lesson->ID;
}
$html .= '</ul>';
$html .= '</section>';
}
I cannot also seem to get the style="background.." to read the php as I would like to.
It will not work because you are getting the ID wrong. The code for the thumbnail should be something like:
wp_get_attachment_image_src( get_post_thumbnail_id($post_ID), 'large' ) ;
you are doing it right except for the fact that you are calling the $lesson->ID on an object $lesson that doesn't exist outside of the loop after it :)
Editing your code:
$lessons = get_posts( $args );
if( count( $lessons ) > 0 ) {
$html .= '<section class="module-lessons">';
$html .= '<header><h3>' . __( 'Lessons', 'sensei_modules' ) . '</h3></header>';
$html .= '<ul>';
foreach( $lessons as $lesson ) {
// This should be inside the loop
$thumbimg = wp_get_attachment_image_src( get_post_thumbnail_id($lesson->ID), array( 200,200 ), false, '' );
$html .= '<li class="lesson-items" style="background-image: url("'. $thumbimg[0] . '")>';
$html .= '' . get_the_title( intval( $lesson->ID ) ) . '';
$html .= '</li>';
// Build array of displayed lesson for exclusion later
$displayed_lessons[] = $lesson->ID;
}
$html .= '</ul>';
$html .= '</section>';
}
As for the background in CSS, use background-image: url ()
I have this code that produces a horizontal menu in wordpress. However, it produces invalid code because the html tags aren't closed. I have tried adding the closing tags in the loop but seems to mess up the menu bad.
foreach ( (array) $menu_items as $key => $menu_item ) {
$tiny_menu_list .= '<option value="'. $menu_item->url .'">'. $menu_item->title .'</option>';
if( !$menu_item->menu_item_parent ){
$menu_list .= '<li><div>' . $menu_item->title . '';
if( count($menu_items) > 1 )
$menu_list .= '<span>';
continue;
}
$menu_list .= '|' . $menu_item->title . '';
}
if( count($menu_items) > 1 )
$menu_list .= '</span>';
$menu_list .= '</div></li></ul>';
Here is what the code generates:
<li><div>Home Page
<span><li><div>About Us
<span>|Why Us ?|Compare Us
<li><div>Take A Tour
<span>|Frequently Asked Questions
<li><div>Free Options Videos
<span><li><div>Options Courses
<span>|Extended Options Course|Ultimate Options Course</span></span></div></li></ul>
As you can tell, each li & span & div are not closed. Thankfully browsers correct for this, but for the sake of being html5 compliant, could use the help in fixing it.
This is not due to html tags, this is happening because you are missing many closing </div> and </li> .
On formatting the code dumped by your loop it shows up like this:
<li>
<div>
Home Page</li>
<span>
<li>
<div>
About Us
<span>|Why Us ?|Compare Us
<li>
<div>
Take A Tour
<span>|Frequently Asked Questions
<li>
<div>
Free Options Videos
<span>
<li><div>Options Courses
<span>|Extended Options Course|Ultimate Options Course</span></span></div></li></ul>
You can check the error by pasting this code in html validator like this one
And it will show you the missing elements.
Maybe, you can try close your tags in the foreach-loop. Maybe like this:
$hasChildLinks = false
foreach ( (array) $menu_items as $key => $menu_item ) {
$tiny_menu_list .= '<option value="'. $menu_item->url .'">'. $menu_item->title .'</option>';
if( !$menu_item->menu_item_parent ){
$menu_list .= '<li><div>' . $menu_item->title . '';
if( count($menu_items) > 1 ) {
$menu_list .= '<span>'
$hasChildLinks = true;
} else {
$menu_list .= '</div></li>';
}
continue;
}
$menu_list .= '|' . $menu_item->title . '';
if( (count($menu_items) > 1) && ($hasChildLinks) ) {
$menu_list.= '</span>';
}
}
$menu_list .= '</ul>';