Here we will cover the classes and the go over CSS selectors to allow for customizations. In order to keep the plugin light, we have some standard classes some themes will hook into. We recommend either using the CSS selectors to change the elements from this plugin across your theme (example below) or adding a custom class to the Add to Cart parent element to hook your own CSS into. Inline CSS is also a great option if you are comfortable with per page CSS.

Single Product Shortcode or Block

Example HTML Output

<div class="add-to-cart-pro ">
	<span class="ea-line ea-text ea-title">
		<span>Pascal Chameleon Plush Toy</span>
	</span>
	<span class="ea-line ea-separator"></span>
	<span class="ea-line ea-text ea-price">
		<span class="woocommerce-Price-amount amount">
			<bdi><span class="woocommerce-Price-currencySymbol">$</span>39.00</bdi>
		</span>
	</span>
	<span class="ea-line quantity-container">
		<div class="quantity">
			<input type="number" id="product_97_qty" class="input-text qty text" value="1" step="1" min="1" max="" name="quantity" title="" size="4" pattern="[0-9]*" inputmode="numeric">
		</div>
	</span>
	<button type="submit" class="a2c_button button alt" data-pid="97" data-vid="0">Add to cart</button>
</div>

CSS Selectors

As we dive into the selectors below, we are going to assume you know the basics of css selectors. If you would like a resource to go over how css selectors in a detailed manor, check out this quick guide!

The basic configuration, as shown above, is built by a parent div, three “text” span elements, one “separator” span element, and one button element.

Parent Element

.add-to-cart-pro {
	border: 1px solid black;
	border-radius: 5px;
	max-width: 25%;
}

Title Element

.ea-title {
	text-decoration: underline;
}

Separator Element

To allow the separator to be changed from a single css selector, the separator used was set using the CSS content attribute.

.ea-separator::before {
	// default:
	content: " - ";
}

.ea-separator {
	// for this example we will hide the separator
	display: none;
}

Price Element(s)

The price elements get a bit more complicated as we utilize the WooCommerce Price function wc_price()

.ea-price .woocommerce-Price-amount {
	font-size: 24px;
	color: red;
}

Quantity Element(s)

.quantity-container {
	// parent container of quantity elements
	display: block;
	width: 90%;
}

.quantity-container .quantity {
	// div container around the quantity input, inside the parent span
}

.quantity-container .quantity .qty {
	// quantity input box
}

// Hiding built in browser quantity increase/decrease buttons
.quantity-container .quantity .qty[type="number"] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}

.quantity-container .quantity .qty[type=number]::-webkit-inner-spin-button, 
.quantity-container .quantity .qty[type=number]::-webkit-outer-spin-button { 
	-webkit-appearance: none;
}

Button Element

button.a2c_button.alt {
	font-size: 20px;
	background-color: #000000;
	color: #ffffff;
}

button.a2c_button.alt:hover {
	background-color: #ffffff;
	color: #000000;
	border: 1px solid black;
}

Group Product Block (Premium)

Example HTML Output

<div class="group-a2cp">
	<div class="a2cp ">
		<span class="ea-line ea-text ea-title">
			<span>Pascal Chameleon Plush Toy</span>
		</span>
		<span class="ea-line ea-separator"></span>
		<span class="ea-line ea-text ea-price">
			<span class="woocommerce-Price-amount amount">
				<bdi><span class="woocommerce-Price-currencySymbol">$</span>39.00</bdi>
			</span>
		</span>
		<span class="ea-line quantity-container">
			<div class="quantity">
				<input type="number" id="product_97_qty" class="input-text qty text" value="1" step="1" min="1" max="" name="quantity" title="" size="4" pattern="[0-9]*" inputmode="numeric">
			</div>
		</span>
		<button type="submit" class="a2c_button button alt" data-pid="97" data-vid="0">Add to cart</button>
	</div>
	<div class="a2cp ">
		<span class="ea-line ea-text ea-title">
			<span>Maximus Horse Plush Toy</span>
		</span>
		<span class="ea-line ea-separator"></span>
		<span class="ea-line ea-text ea-price">
			<span class="woocommerce-Price-amount amount">
				<bdi><span class="woocommerce-Price-currencySymbol">$</span>59.00</bdi>
			</span>
		</span>
		<span class="ea-line quantity-container">
			<div class="quantity">
				<input type="number" id="product_98_qty" class="input-text qty text" value="1" step="1" min="1" max="" name="quantity" title="" size="4" pattern="[0-9]*" inputmode="numeric">
			</div>
		</span>
		<button type="submit" class="a2c_button button alt" data-pid="98" data-vid="0">Add to cart</button>
	</div>
</div>

CSS Selectors

Generally, you can refer to the above section in the shortcode CSS selectors, as they should share the same output. Below you will find reference to the unique group selector.

.group-a2cp {
	max-width: 80%;
	display: flex;
}