Home › Forums › WoodMart support forum › Add Bag Icon Before ‘Add To Cart’ button

Add Bag Icon Before ‘Add To Cart’ button

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • January 8, 2024 at 3:46 pm #527906

    saziyainfo
    Participant

    i would like to place a shopping bag icon before the ‘Add to Cart’ button

    January 8, 2024 at 4:59 pm #527956

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Please add this code to the Theme Settings > Custom CSS > Global:

    body .single_add_to_cart_button:before {
	position: absolute;
	inset-inline-start: 0;
	content: "\f105";
  font-family: "woodmart-font";
	opacity: 1;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	background-color: #E84744;
	transition: all .3s ease;
}

body .single_add_to_cart_button:after {
	inset-inline-start: 20px;
}

body .single_add_to_cart_button.loading:before {
	color: transparent;
}

body .single_add_to_cart_button {
	padding-inline-start: 60px;
}

body .single_add_to_cart_button:hover:before {
	background-color: red;
}

    Best Regards.

    January 8, 2024 at 6:10 pm #528011

    saziyainfo
    Participant

    i want icon add to cart text before like this

    Attachments:
    You must be logged in to view attached files.
    January 9, 2024 at 11:05 am #528175

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Please add this code to the Theme Settings > Custom CSS > Global:

    body .single_add_to_cart_button:before {
	position: absolute;
	inset-inline-start: 0;
	content: "\f07a";
  font-family: "Font Awesome 5 Free";
	opacity: 1;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	transition: all .3s ease;
}

    Change the value as per your requirements to adjust the icon.

    Best Regards.

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)