CODEWITHSUNDEEP
wordpresswoocommerce
user9473275
user9473275

Reputation: 11

Adding a class to a woocomerce div tag

I'm using Woocommerce with a WP theme I have developed. I need to add a class to the Woocommerce div on the product page toget the Woocommerce content to fit within my sites container.

I'm quite new to Wordpress/ Woocommerce.

Please could someone advise how I can do this.

I simply need to change

<div class="woocommerce"> to <div class="container woocommerce">

Thanks

Neil

Upvotes: 1

Views: 2959

Answers (5)

Nicolas RIVIERE
Nicolas RIVIERE

Reputation: 1

add_filter( 'the_content', 'add_woocommerce_container_classes', 99, 1);
function add_woocommerce_container_classes( $the_content ) {

    $the_content = preg_replace('/class\=\"woocommerce\"/', 'class="woocommerce your-new-class"', $the_content);

    return $the_content;
}

Upvotes: 0

pjehan
pjehan

Reputation: 850

Best way to add a container to every pages might be to use WooCommerce hooks.

To enable WooCommerce support for your theme, add the following lines to your functions.php file:

add_action( 'after_setup_theme', 'woocommerce_support' );
function woocommerce_support() {
   add_theme_support( 'woocommerce' );
}

After that, use the hooks woocommerce_before_main_content and woocommerce_after_main_content to add your HTML code before and after WooCommerce content:

add_action( 'woocommerce_before_main_content', function() {
    echo '<div class="container">'; // Open the container before WooCommerce content
}, 10);

add_action( 'woocommerce_after_main_content', function() {
    echo '</div>'; // Close the div tag opened for the container
}, 10);

Upvotes: 0

Fab
Fab

Reputation: 1190

In my case I work with Bootstrap 4 framework, in order to apply .row class to woocommerce div in "my account" page I simply use make-row() mixin, example :

.woocommerce-account{
  .woocommerce{
      @include make-row();
    }
  }

Also you can use make-container() mixin, it depends of your project needs.

More infos here

Upvotes: 0

Nikesh Kumar
Nikesh Kumar

Reputation: 419

there is two options to add class 1. search that particular div/class to woocommerce folder 2. add via jQuery

$('.woocommerce').addClass('container');

incase of multiple woocommerce class in your page please inherit that class from parent.

like:-

$('parentUniqueSelector .woocommerce').addClass('container');

for more detail please share hosted link or example code.

Upvotes: 0

Gavin Thomas
Gavin Thomas

Reputation: 1206

The best way to do this would be to take a copy of the default WooCommerce template files and then create them for your own theme; there's a lot of documentation surrounding this.

https://docs.woocommerce.com/document/template-structure/#

Edit files in an upgrade-safe way using overrides. Copy the template into a directory within your theme named /woocommerce keeping the same file structure but removing the /templates/ subdirectory.

Example: To override the admin order notification, copy: wp-content/plugins/woocommerce/templates/emails/admin-new-order.php to wp-content/themes/yourtheme/woocommerce/emails/admin-new-order.php

Upvotes: 2

Related Questions