How to adding frames to wordpress product images

Hi every one! In this article ALOWEBTOT will show you how to add frames for product images in wordpress.

How to css frames to wordpress product images

Prepare a frame images file to insert into the background for the product.

Choose the picture as the frame that you like. Upload to hosing or VPS.

Locate where you want to insert this image. ( exp : I inserted the featured product).

Please follow the image below:

You go to edit with ux buider select featured product and give class as noibat.

Insert the css into the frame with following code:

.noibat .box-image:before {
    content: '';
    z-index: 3;
    width: 100%;
    height: 100%;
    background: url('frame-image') no-repeat;
    background-size: contain;
    position: absolute;
 margin-left: -50%;
}
.has-equal-box-heights .box-image:before {
   content: '';
    z-index: 3;
    width: 100%;
    height: 100%;
    background: url('frame-image') no-repeat;
    background-size: contain;
    position: absolute;
    margin-top: -100%;
}
.product-gallery-slider:before {
    content: '';
    z-index: 3;
    width: 100%;
    height: 100%;
    background: url('frame-image') no-repeat;
    background-size: contain;
    position: absolute;
}

You replace your image in the item frame-image.

There are 3 places for the product frame background

OK, then you can try to see the demo.

Have a nice day.