I'm a WordPress beginner, and I'm currently working on customizing the appearance of product categories on my site. Specifically, I want to add a distinctive colored border around products belonging to the NEW ARRIVAL category. My WordPress version is 6.3.1, and I'm using the Astra theme along with elementor, Royal Addons plugin. this code is in the Custom CSS - Royal Addons .eael-product-wrap{ border: solid 0.3em; border-color: blue; } The HTML Code is: <div class="e-con-inner"> <div class="elementor-element elementor-element-36d76f8 eael-product-gallery-column-3 elementor-widget elementor-widget-eael-woo-product-gallery" data-id="36d76f8" data-element_type="widget" data-widget_type="eael-woo-product-gallery.default"> <div class="elementor-widget-container"> <div class="eael-product-gallery eael-product-preset-2 grid eael-terms-layout-horizontal" id="eael-product-gallery" data-widget-id="36d76f8" data-page-id="20" data-nonce="72ccf57232"> <ul class="eael-cat-tab" data-layout="grid" data-template="{"dir":"lite","file_name":"default.php","name":"Woo-Product-Gallery"}" data-nonce="72ccf57232" data-page-id="20" data-widget-id="36d76f8" data-widget="36d76f8" data-class="Essential_Addons_Elementor\Elements\Woo_Product_Gallery" data-args="post_type=product&post_status%5B0%5D=publish&post_status%5B1%5D=pending&post_status%5B2%5D=future&posts_per_page=8&order=desc&offset=0&tax_query%5Brelation%5D=AND&tax_query%5B0%5D%5Btaxonomy%5D=product_visibility&tax_query%5B0%5D%5Bfield%5D=name&tax_query%5B0%5D%5Bterms%5D%5B0%5D=exclude-from-search&tax_query%5B0%5D%5Bterms%5D%5B1%5D=exclude-from-catalog&tax_query%5B0%5D%5Boperator%5D=NOT+IN&tax_query%5B1%5D%5Brelation%5D=OR&tax_query%5B1%5D%5B0%5D%5Btaxonomy%5D=product_cat&tax_query%5B1%5D%5B0%5D%5Bfield%5D=term_id&tax_query%5B1%5D%5B0%5D%5Bterms%5D%5B0%5D=61&tax_query%5B1%5D%5B0%5D%5Bterms%5D%5B1%5D=60&tax_query%5B1%5D%5B0%5D%5Bterms%5D%5B2%5D=62&tax_query%5B1%5D%5B0%5D%5Boperator%5D=IN&tax_query%5B1%5D%5B1%5D%5Btaxonomy%5D=product_tag&tax_query%5B1%5D%5B1%5D%5Bfield%5D=term_id&tax_query%5B1%5D%5B1%5D%5Bterms%5D%5B0%5D=45&tax_query%5B1%5D%5B1%5D%5Bterms%5D%5B1%5D=44&tax_query%5B1%5D%5B1%5D%5Bterms%5D%5B2%5D=48&tax_query%5B1%5D%5B1%5D%5Boperator%5D=IN&orderby=date&meta_query%5Brelation%5D=AND" data-page="1"><li><a href="javascript:;" data-taxonomy="product_cat|product_tag" data-page="1" data-tagid="["45","44","48"]" data-id="["61","60","62"]" class="active post-list-filter-item post-list-cat-36d76f8">All</a></li><li><a href="javascript:;" data-page="1" data-taxonomy="product_cat" data-terms="["onsale"]" data-id="61" class="post-list-filter-item ">ON Sale</a></li><li><a href="javascript:;" data-page="1" data-taxonomy="product_cat" data-terms="["new-product"]" data-id="60" class="post-list-filter-item ">NEW ARRIVAL</a></li><li><a href="javascript:;" data-page="1" data-taxonomy="product_cat" data-terms="["trending"]" data-id="62" class="post-list-filter-item ">TRENDING</a></li></ul> <div class="woocommerce"> <ul class="products eael-post-appender eael-post-appender-36d76f8" data-layout-mode="grid" data-show-secondary-image="0"> <li class="product post-353 type-product status-publish has-post-thumbnail product_cat-new-product product_tag-armchair product_tag-chair product_tag-wood ast-article-single desktop-align-left tablet-align-left mobile-align-left first instock shipping-taxable purchasable product-type-simple"> <div class="eael-product-wrap" data-src="" data-src-hover=""> <div class="product-image-wrap"> <div class="image-wrap"> <a href="http://localhost/wp/product/chair8/" class="woocommerce-LoopProduct-link woocommerce-loop-product__link"><img decoding="async" width="300" height="225" src="http://localhost/wp/wp-content/uploads/2024/01/c8.png" class="attachment-medium size-medium" alt="" loading="eager"></a> </div> <div class="image-hover-wrap"> <ul class="icons-wrap block-box-style"> <li class="add-to-cart"><a href="?add-to-cart=353" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="353" data-product_sku="21540" aria-label="Add to cart: “chair8”" aria-describedby="" rel="nofollow">Add to cart</a></li> <li class="eael-product-quick-view"> <a id="eael_quick_view_65a81b6f24318" data-quickview-setting="{"widget_id":"36d76f8","product_id":353,"page_id":20}" class="eael-product-gallery-open-popup open-popup-link"> <i class="fas fa-eye"></i> </a> </li> <li class="view-details"><a href="http://localhost/wp/product/chair8/"><i class="fas fa-link"></i></a></li> </ul> </div> </div> <div class="product-details-wrap"> <div class="eael-product-price"><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span> 5.000.000</bdi></span></div><div class="star-rating"><span style="width:0%">Rated <strong class="rating">0</strong> out of 5</span></div> <div class="eael-product-title"> <h2>chair8</h2> </div> </div> </div> </li> <li class="product post-351 type-product status-publish has-post-thumbnail product_cat-trending product_tag-living-room product_tag-sofa ast-article-single desktop-align-left tablet-align-left mobile-align-left instock shipping-taxable purchasable product-type-simple"> <div class="eael-product-wrap" data-src="" data-src-hover=""> <div class="product-image-wrap"> <div class="image-wrap"> <a href="http://localhost/wp/product/livingroom2/" class="woocommerce-LoopProduct-link woocommerce-loop-product__link"><img decoding="async" width="300" height="225" src="http://localhost/wp/wp-content/uploads/2024/01/s7.png" class="attachment-medium size-medium" alt="" loading="eager"></a> </div> <div class="image-hover-wrap"> <ul class="icons-wrap block-box-style"> <li class="add-to-cart"><a href="?add-to-cart=351" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="351" data-product_sku="8745" aria-label="Add to cart: “Livingroom7”" aria-describedby="" rel="nofollow">Add to cart</a></li> <li class="eael-product-quick-view"> <a id="eael_quick_view_65a81b6f262db" data-quickview-setting="{"widget_id":"36d76f8","product_id":351,"page_id":20}" class="eael-product-gallery-open-popup open-popup-link"> <i class="fas fa-eye"></i> </a> </li> <li class="view-details"><a href="http://localhost/wp/product/livingroom2/"><i class="fas fa-link"></i></a></li> </ul> </div> </div> <div class="product-details-wrap"> <div class="eael-product-price"><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span> 10.000.000</bdi></span></div><div class="star-rating"><span style="width:0%">Rated <strong class="rating">0</strong> out of 5</span></div> <div class="eael-product-title"> <h2>Livingroom7</h2> </div> </div> </div> </li> <li class="product post-229 type-product status-publish has-post-thumbnail product_cat-new-product product_tag-livingroom product_tag-sofa ast-article-single desktop-align-left tablet-align-left mobile-align-left instock shipping-taxable purchasable product-type-simple"> <div class="eael-product-wrap" data-src="" data-src-hover=""> <div class="product-image-wrap"> <div class="image-wrap"> <a href="http://localhost/wp/product/sofa-2/" class="woocommerce-LoopProduct-link woocommerce-loop-product__link"><img decoding="async" width="300" height="225" src="http://localhost/wp/wp-content/uploads/2024/01/s1-2.png" class="attachment-medium size-medium" alt="" loading="eager"></a> </div> <div class="image-hover-wrap"> <ul class="icons-wrap block-box-style"> <li class="add-to-cart"><a href="?add-to-cart=229" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="229" data-product_sku="9785" aria-label="Add to cart: “Living room1”" aria-describedby="" rel="nofollow">Add to cart</a></li> <li class="eael-product-quick-view"> <a id="eael_quick_view_65a81b6f27469" data-quickview-setting="{"widget_id":"36d76f8","product_id":229,"page_id":20}" class="eael-product-gallery-open-popup open-popup-link"> <i class="fas fa-eye"></i> </a> </li> <li class="view-details"><a href="http://localhost/wp/product/sofa-2/"><i class="fas fa-link"></i></a></li> </ul> </div> </div> <div class="product-details-wrap"> <div class="eael-product-price"><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span> 450.000</bdi></span></div><div class="star-rating"><span style="width:0%">Rated <strong class="rating">0</strong> out of 5</span></div> <div class="eael-product-title"> <h2>Living room1</h2> </div> </div> </div> </li> <li class="product post-227 type-product status-publish has-post-thumbnail product_cat-new-product product_tag-armchair product_tag-chair ast-article-single desktop-align-left tablet-align-left mobile-align-left last instock shipping-taxable purchasable product-type-simple"> <div class="eael-product-wrap" data-src="" data-src-hover=""> <div class="product-image-wrap"> <div class="image-wrap"> <a href="http://localhost/wp/product/armchair/" class="woocommerce-LoopProduct-link woocommerce-loop-product__link"><img decoding="async" width="300" height="225" src="http://localhost/wp/wp-content/uploads/2024/01/c14.png" class="attachment-medium size-medium" alt="" loading="eager"></a> </div> <div class="image-hover-wrap"> <ul class="icons-wrap block-box-style"> <li class="add-to-cart"><a href="?add-to-cart=227" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="227" data-product_sku="5482" aria-label="Add to cart: “ArmChair14”" aria-describedby="" rel="nofollow">Add to cart</a></li> <li class="eael-product-quick-view"> <a id="eael_quick_view_65a81b6f2814a" data-quickview-setting="{"widget_id":"36d76f8","product_id":227,"page_id":20}" class="eael-product-gallery-open-popup open-popup-link"> <i class="fas fa-eye"></i> </a> </li> <li class="view-details"><a href="http://localhost/wp/product/armchair/"><i class="fas fa-link"></i></a></li> </ul> </div> </div> <div class="product-details-wrap"> <div class="eael-product-price"><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span> 5.000.000</bdi></span></div><div class="star-rating"><span style="width:0%">Rated <strong class="rating">0</strong> out of 5</span></div> <div class="eael-product-title"> <h2>ArmChair14</h2> </div> </div> </div> </li> <li class="product post-225 type-product status-publish has-post-thumbnail product_cat-trending product_tag-bed product_tag-orange ast-article-single desktop-align-left tablet-align-left mobile-align-left first instock shipping-taxable purchasable product-type-simple"> <div class="eael-product-wrap" data-src="" data-src-hover=""> <div class="product-image-wrap"> <div class="image-wrap"> <a href="http://localhost/wp/product/bed-room/" class="woocommerce-LoopProduct-link woocommerce-loop-product__link"><img decoding="async" width="300" height="225" src="http://localhost/wp/wp-content/uploads/2024/01/b11.png" class="attachment-medium size-medium" alt="" loading="eager"></a> </div> <div class="image-hover-wrap"> <ul class="icons-wrap block-box-style"> <li class="add-to-cart"><a href="?add-to-cart=225" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="225" data-product_sku="" aria-label="Add to cart: “bed room11”" aria-describedby="" rel="nofollow">Add to cart</a></li> <li class="eael-product-quick-view"> <a id="eael_quick_view_65a81b6f29b9c" data-quickview-setting="{"widget_id":"36d76f8","product_id":225,"page_id":20}" class="eael-product-gallery-open-popup open-popup-link"> <i class="fas fa-eye"></i> </a> </li> <li class="view-details"><a href="http://localhost/wp/product/bed-room/"><i class="fas fa-link"></i></a></li> </ul> </div> </div> <div class="product-details-wrap"> <div class="eael-product-price"><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span> 100.000.000</bdi></span></div><div class="star-rating"><span style="width:0%">Rated <strong class="rating">0</strong> out of 5</span></div> <div class="eael-product-title"> <h2>bed room11</h2> </div> </div> </div> </li> <li class="product post-219 type-product status-publish has-post-thumbnail product_cat-new-product product_tag-bed ast-article-single desktop-align-left tablet-align-left mobile-align-left instock shipping-taxable purchasable product-type-simple"> <div class="eael-product-wrap" data-src="" data-src-hover=""> <div class="product-image-wrap"> <div class="image-wrap"> <a href="http://localhost/wp/product/modern-bed-room/" class="woocommerce-LoopProduct-link woocommerce-loop-product__link"><img decoding="async" width="300" height="225" src="http://localhost/wp/wp-content/uploads/2024/01/b9.png" class="attachment-medium size-medium" alt="" loading="eager"></a> </div> <div class="image-hover-wrap"> <ul class="icons-wrap block-box-style"> <li class="add-to-cart"><a href="?add-to-cart=219" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="219" data-product_sku="" aria-label="Add to cart: “bed room9”" aria-describedby="" rel="nofollow">Add to cart</a></li> <li class="eael-product-quick-view"> <a id="eael_quick_view_65a81b6f2b3cc" data-quickview-setting="{"widget_id":"36d76f8","product_id":219,"page_id":20}" class="eael-product-gallery-open-popup open-popup-link"> <i class="fas fa-eye"></i> </a> </li> <li class="view-details"><a href="http://localhost/wp/product/modern-bed-room/"><i class="fas fa-link"></i></a></li> </ul> </div> </div> <div class="product-details-wrap"> <div class="eael-product-price"><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span> 45.000.000</bdi></span></div><div class="star-rating"><span style="width:0%">Rated <strong class="rating">0</strong> out of 5</span></div> <div class="eael-product-title"> <h2>bed room9</h2> </div> </div> </div> </li> <li class="product post-197 type-product status-publish has-post-thumbnail product_cat-new-product product_tag-house product_tag-living-room product_tag-sofa ast-article-single desktop-align-left tablet-align-left mobile-align-left instock shipping-taxable purchasable product-type-simple"> <div class="eael-product-wrap" data-src="" data-src-hover=""> <div class="product-image-wrap"> <div class="image-wrap"> <a href="http://localhost/wp/product/modern-living-room/" class="woocommerce-LoopProduct-link woocommerce-loop-product__link"><img decoding="async" width="300" height="225" src="http://localhost/wp/wp-content/uploads/2024/01/s3.png" class="attachment-medium size-medium" alt="" loading="eager"></a> </div> <div class="image-hover-wrap"> <ul class="icons-wrap block-box-style"> <li class="add-to-cart"><a href="?add-to-cart=197" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="197" data-product_sku="46972" aria-label="Add to cart: “living room3”" aria-describedby="" rel="nofollow">Add to cart</a></li> <li class="eael-product-quick-view"> <a id="eael_quick_view_65a81b6f2c5be" data-quickview-setting="{"widget_id":"36d76f8","product_id":197,"page_id":20}" class="eael-product-gallery-open-popup open-popup-link"> <i class="fas fa-eye"></i> </a> </li> <li class="view-details"><a href="http://localhost/wp/product/modern-living-room/"><i class="fas fa-link"></i></a></li> </ul> </div> </div> <div class="product-details-wrap"> <div class="eael-product-price"><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span> 10.000.000</bdi></span></div><div class="star-rating"><span style="width:0%">Rated <strong class="rating">0</strong> out of 5</span></div> <div class="eael-product-title"> <h2>living room3</h2> </div> </div> </div> </li> <li class="product post-188 type-product status-publish has-post-thumbnail product_cat-trending product_tag-bed product_tag-bedroom product_tag-yellow ast-article-single desktop-align-left tablet-align-left mobile-align-left last instock shipping-taxable purchasable product-type-simple"> <div class="eael-product-wrap" data-src="" data-src-hover=""> <div class="product-image-wrap"> <div class="image-wrap"> <a href="http://localhost/wp/product/bed1/" class="woocommerce-LoopProduct-link woocommerce-loop-product__link"><img decoding="async" width="300" height="225" src="http://localhost/wp/wp-content/uploads/2024/01/b10.png" class="attachment-medium size-medium" alt="" loading="eager"></a> </div> <div class="image-hover-wrap"> <ul class="icons-wrap block-box-style"> <li class="add-to-cart"><a href="?add-to-cart=188" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="188" data-product_sku="154890" aria-label="Add to cart: “Bed10”" aria-describedby="" rel="nofollow">Add to cart</a></li> <li class="eael-product-quick-view"> <a id="eael_quick_view_65a81b6f2ebc6" data-quickview-setting="{"widget_id":"36d76f8","product_id":188,"page_id":20}" class="eael-product-gallery-open-popup open-popup-link"> <i class="fas fa-eye"></i> </a> </li> <li class="view-details"><a href="http://localhost/wp/product/bed1/"><i class="fas fa-link"></i></a></li> </ul> </div> </div> <div class="product-details-wrap"> <div class="eael-product-price"><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span> 10.000.000</bdi></span></div><div class="star-rating"><span style="width:0%">Rated <strong class="rating">0</strong> out of 5</span></div> <div class="eael-product-title"> <h2>Bed10</h2> </div> </div> </div> </li> </ul> <div class="eael-load-more-button-wrap"> <button class="eael-load-more-button" id="eael-load-more-btn-36d76f8" data-widget-id="36d76f8" data-widget="36d76f8" data-page-id="20" data-template="{"dir":"lite","file_name":"default.php","name":"Woo-Product-Gallery"}" data-class="Essential_Addons_Elementor\Elements\Woo_Product_Gallery" data-layout="grid" data-page="1" data-args="post_type=product&post_status%5B0%5D=publish&post_status%5B1%5D=pending&post_status%5B2%5D=future&posts_per_page=8&order=desc&offset=0&tax_query%5Brelation%5D=AND&tax_query%5B0%5D%5Btaxonomy%5D=product_visibility&tax_query%5B0%5D%5Bfield%5D=name&tax_query%5B0%5D%5Bterms%5D%5B0%5D=exclude-from-search&tax_query%5B0%5D%5Bterms%5D%5B1%5D=exclude-from-catalog&tax_query%5B0%5D%5Boperator%5D=NOT+IN&tax_query%5B1%5D%5Brelation%5D=OR&tax_query%5B1%5D%5B0%5D%5Btaxonomy%5D=product_cat&tax_query%5B1%5D%5B0%5D%5Bfield%5D=term_id&tax_query%5B1%5D%5B0%5D%5Bterms%5D%5B0%5D=61&tax_query%5B1%5D%5B0%5D%5Bterms%5D%5B1%5D=60&tax_query%5B1%5D%5B0%5D%5Bterms%5D%5B2%5D=62&tax_query%5B1%5D%5B0%5D%5Boperator%5D=IN&tax_query%5B1%5D%5B1%5D%5Btaxonomy%5D=product_tag&tax_query%5B1%5D%5B1%5D%5Bfield%5D=term_id&tax_query%5B1%5D%5B1%5D%5Bterms%5D%5B0%5D=45&tax_query%5B1%5D%5B1%5D%5Bterms%5D%5B1%5D=44&tax_query%5B1%5D%5B1%5D%5Bterms%5D%5B2%5D=48&tax_query%5B1%5D%5B1%5D%5Boperator%5D=IN&orderby=date&meta_query%5Brelation%5D=AND&found_posts=17" data-max-page="3"> <span class="eael-btn-loader button__loader"></span> <span class="eael_load_more_text">Load More</span> </button> </div> </div> </div> <script type="text/javascript"> jQuery(document).ready(function ($) { var $scope = jQuery(".elementor-element-36d76f8"); var $products = $('.products', $scope); var $layout_mode = $products.data('layout-mode'); if ($layout_mode === 'masonry') { // init isotope var $isotope_products = $products.isotope({ itemSelector: "li.product", layoutMode: $layout_mode, percentPosition: true }); $isotope_products.imagesLoaded().progress(function () { $isotope_products.isotope('layout'); }) $(window).on('resize', function () { $isotope_products.isotope('layout'); }); } }); </script> </div> </div> </div>