after last woocommerce update the the css class "post-number" has removed
it was very nice for example add a different bg-color for each specific product and keep it permanent
<li class="product post-1719 type-product status-publish">...</li>
<li class="product post-1720 type-product status-publish">...</li>
<li class="product post-1721 type-product status-publish">...</li>
how can fix this?
Related
I looking for all day, a proper solution for make woocommerce template with bootstrap grid. Always i tried make changes with hooks because i think its the best way.
Woocommerce display products list like this:
<ul class="products">
<li class="post-24 product type-product status-publish has-post-thumbnail product_cat-zupki-z-chin product_tag-test first instock shipping-taxable purchasable product-type-simple"></li>
<li class="post-30 product type-product status-publish has-post-thumbnail product_cat-zupki-z-chin instock shipping-taxable purchasable product-type-simple"></li>
<li class="post-31 product type-product status-publish has-post-thumbnail product_cat-zupki-z-chin instock shipping-taxable purchasable product-type-simple"></li>
<li class="post-32 product type-product status-publish has-post-thumbnail product_cat-zupki-z-chin last instock shipping-taxable purchasable product-type-simple"></li>
</ul>
I would like change this to proper bootstrap grid.
Something like that:
<div class="row">
<div class="col-md3">product</li>
<div class="col-md3">product</li>
<div class="col-md3">product</li>
<div class="col-md3">product</li>
</ul>
Change ul to div its possible by function woocommerce_product_loop_start(), but how can I change/replace li class=".... to div class="col-md.... ?
Thank you in advance for your help
So you will want to overwrite a woocommerce template file with a template file in your child theme.
FTP into your install, go to wp-content/plugins/woocommerce/templates, copy content-product.php, duplicate that file in your child theme in a new folder called 'woocommerce'.
Then change the <ul <?php post_class(); ?>> to your div and whatever class you want.
If you have questions about overriding woocommerce template files check this out: https://wordpress.stackexchange.com/questions/256088/how-to-override-woocommerce-template-files
You can change <ul> without editing template, just use this in functions.php:
/**
* Add Custom WooCommerce Loop Start
*/
function woocommerce_product_loop_start( $echo = true ) {
ob_start();
echo '<div class="something">';
if ( $echo )
echo ob_get_clean();
else
return ob_get_clean();
}
The easy way to change it is to overriding woocomerce templates.
The Ul tag is generated by loop-start.php.
You can find it on:
content/plugins/woocommerce/templates/loop/loop-start.php.
if you want to change the loop start and loop end you have to copy the files:
wp-content/plugins/woocommerce/templates/loop/loop-start.php
into your themes folder:
wp-content/themes/mysuperchildtheme/woocommerce/loop/
I'm using bootstrap tab shortcodes on my Wordpress site. I want to link from another page to tab2. Can anyone advise how this is done?
My page code (chopped a bit):
[bootstrap_tab name="TAB1" link="tab1-slug" active="active"]
TAB 1 Content
[/bootstrap_tab]
[bootstrap_tab name="TAB2" link="tab2-slug"]
More content
[/bootstrap_tab]
[bootstrap_tab name="TAB3" link="tab3-slug"]
Yep. Even more content.
[/bootstrap_tab]
[bootstrap_tab name="TAB4" link="tab4-slug"]
Yep. Even more content.
[/bootstrap_tab]
[end_bootstrap_tab]
The code it produces:
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="tabs active">
<a data-toggle="tab" href="#tab1-slug">TAB1</a>
</li>
<li class="tabs ">
<a data-toggle="tab" href="#tab2-slug">TAB2</a>
</li>
<li class="tabs ">
<a data-toggle="tab" href="#tab3-slug">TAB3</a>
</li>
<li class="tabs ">
<a data-toggle="tab" href="#tab4-slug">TAB4</a>
</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div id="tab1-slug" class="tab-pane active">
<p></p>
<h2>header</h2>
<p><strong>bold</strong></p>
<p>content</p>
<p></p>
</div>
<div id="tab2-slug" class="tab-pane ">
<p></p>
<h2>TAB2</h2>
<p><strong>These are usually two day</strong></p>
</div>
<div id="tab3-slug" class="tab-pane ">
<p></p>
<h2>TAB3</h2>
<p>1 to 2 day events</p><p></p>
</div>
<div id="tab4-slug" class="tab-pane ">
<p>
<h2>TAB4</h2>
<p><strong>5 to 10 day courses</strong></p>
</div>
</div>
Though not in WordPress, this seems to be the definitive solution to linking to Bootstrap tabs:
Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink
That being said, I wrote a WordPress plugin that will do this. Activate the plugin, then you'll be able to use the tab's href as the hash.
If your tab looks like this:
<li>Profile</li>
You can link to it and activate/open it using a link like this:
Link to my tab
The plugin will also allow you to link directly to content on the tabs, using a sort of a two-step link:
Step 1 Activate the proper tab
Step 2 Scroll to the content on the tab.
It does this using only a single hash in the URL.
For example: http://www.example.com/mypage/#content
This will take you to "mypage" and the HTML element with id="content", whether it's on an active/inactive Bootstrap tab or just on the page somewhere.
Hope this helps:
Here's the plugin on GitHub: https://github.com/marinersmuseum/WP-Tab-Anchors/blob/master/wp-tab-anchors.zip
Supposing that jQuery is being loaded and that the link URL is something like
http://example.com/page-with-tabs/?tab=NUMBER
We print some conditional script at the footer:
add_action( 'wp_footer', 'active_tab_so_19576232' );
function active_tab_so_19576232()
{
# Query var not set in URL, bail out
if( !isset( $_GET['tab'] ) )
return;
# Change the active tab
$tab = '#tab'. $_GET['tab'] .'-slug';
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('div.tab-pane.active').removeClass('active');
$('<?php echo $tab; ?>').addClass('active');
});
</script>
<?php
}
Should be a plugin, but you can drop the code in your theme functions.php.
I need to show the category thumb and description of custom taxonomy. lets say I have this:
<ul>
<li>Cars
<ul>
<li>Electric cars</li>
<li>foo cars
<ul>
<li>Toyota</li>
<li>Nissan</li>
</ul>
</li>
</ul>
</li>
</ul>
And what i need is to show the thumb and description of the subcategories electric cars and foo cars, not the post inside them.
Anyone can guide me, where i can looking foor?
Tks
I am developing WP website and stuck in side bar category showing functionality.
Here is my code.
<div class="sidebarcategory">
<h2 class="widgettitle"><?php echo get_cat_name(3); ?></h2>
<ul>
<li>
<?php wp_list_categories('hide_empty=0&orderby=name&child_of=3&feed_image=http://devsites.dyndns.info/novelty/wp-content/themes/pixel/images/icon-car.png'); ?>
</li>
</ul>
</div>
So, this display me Additional "Category" over the top of the list which i don't require. Can anybody help me to remove out in dynamic code. Output looks like
<ul>
<li>
</li><li class="categories">Categories<ul> <li class="cat-item cat-item-4">
add a emty parameter title_li
wp_list_categories('title_li=&hide_empty=0&orderby=name&child_of=3&feed_image=http://devsites.dyndns.info/novelty/wp-content/themes/pixel/images/icon-car.png');
Suppose I have 2 pages Contact, About.
wp_nav_menu( array( 'show_home'=>true ) )
will display three links as 'Home', 'Contact', 'About'.
Here I would like to add one more custom link as 'Example' and navigate to www.example.com
Excepted result
<div class="menu">
<ul>
<li>
<a title="Home" href="http://www.test.com/">Home</a>
</li>
<li class="page_item page-item-2 current_page_item">
<a title="About" href="http://www.test.com/?page_id=2">About</a>
</li>
<li>
<a title="Home" href="http://www.test.com/?page_id=3">Home</a>
</li>
<li>
<a title="Home" href="http://www.example.com/?page_id=3">Example</a>
</li>
</ul>
</div>
This is using the new built in Menus available under Appearance -> Menus. Above the box of Pages there is a place to add custom links. You would put in "Example" and "www.example.com" and click "Add to Menu".