namncn

{
  "vars": {
    "@gray-base": "#000",
    "@gray-darker": "lighten(@gray-base, 13.5%)",
    "@gray-dark": "lighten(@gray-base, 20%)",
    "@gray": "lighten(@gray-base, 33.5%)",
    "@gray-light": "lighten(@gray-base, 46.7%)",
    "@gray-lighter": "lighten(@gray-base, 93.5%)",
    "@brand-primary": "darken(#428bca, 6.5%)",
    "@brand-success": "#5cb85c",

namncn

<div id="box" class="box"></div>

namncn

.box {
  background: blue;
  width: 200px;
  height: 200px;
}

namncn

#box {
  background: blue;
  width: 200px;
  height: 200px;
}

namncn

.box {
  background: orange;
  width: 200px;
  height: 200px;
  border: 1px solid black;
}

namncn

.box {
  background: #000000;
  width: 250px;
  height: 250px;
  border-radius: 5px;
}

namncn

.box {
  background: green;
  width: 250px;
  height: 250px;
  border-radius: 5px;
  border: 3px dashed red;
}

namncn

<?php
	/**
	* woocommerce_before_main_content hook.
	*
	* @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
	* @hooked woocommerce_breadcrumb - 20
	*/
	do_action( 'woocommerce_before_main_content' );
?>

namncn

remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10 );

namncn

function ncn_woocommerce_output_content_wrapper {
	echo '<div class="my-class">';
}
add_action( 'woocommerce_before_main_content', 'ncn_woocommerce_output_content_wrapper', 15 );