eCommerceWordPress

How to Make a Pet Shop & Pet Accessories Store Website Using WordPress 2026

Tools and Links Used

Hostinger Fast, beginner friendly WordPress hosting.
Get Hosting
Elementor The free page builder this tutorial is built with.
Get Elementor
Elementor Pro The Pro upgrade used throughout this tutorial.
Get Elementor Pro
Project Files Download the resources used in this tutorial.
Download Files
Kitninja eCommerce Elementor template kits.
Get Templates
Kitpapa Ready made Elementor template kits.
Get Templates

Prompt Used in This Tutorial

Website Default Style CSS
.elementor-page .page-header {
    display: none;
}

.elementor-icon {
    line-height: 0;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

.page-header .entry-title {
 text-align:center;
}
Home Page Button Style CSS
<style>
#defult_btn span.elementor-button-content-wrapper {
    display: flex
;
    align-items: center;
}
#defult_btn .elementor-button-icon {
    display: flex
;
}
#defult_btn .elementor-button-icon svg {
    width: 32px;
    height: 32px;
}

@media only screen and (max-width: 767px) {
  #defult_btn .elementor-button-icon svg {
    width: 24px;
    height: 24px;
}

}
</style>
Home Page Button Style CSS ID
defult_btn
Product Heading Style CSS For Home Page
.myProductGrid .woocommerce-loop-product__title {
    font-weight: 500;
    line-height: 1.3em;
    letter-spacing: 0;
}
Product Heading Style CSS Class For Home Page
myProductGrid
Counter Style CSS
@media (min-width: 768px){
    .countdown .elementskit-timer-container {
    position: relative;
}

.countdown .elementskit-timer-container:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 1px;
    height: 48px;
    background: rgba(31, 33, 49, 0.1);
    transform: translateY(-50%);
}
}
Counter Style CSS Class
countdown
Blog Post Image Style CSS (For Home Page)
.blogPosts .elementskit-post-image-card img {
    height: 432px !important;
    object-fit: cover;
}
Blog Post Image Style CSS Class (For Home Page)
blogPosts
Product Short Code For Best Selling Product
[best_selling_products  class="myProductGrid"  columns="4" limit="8"]
Product Short Code For Latest Product
[products orderby=”date” per_page="4"  class="myProductGrid" columns="2"]
Page Header Style CSS
@media (min-width: 992px) {
    .has-header-layout-1 .site-navigation {
        text-align: center;
    }
}

header.site-header {
    position: relative;
    z-index: 90;
}

.site-header-inner {
    border-bottom: none;
    box-shadow: 0px 1px 10px 0px rgba(31.000000000000007, 33, 49.00000000000001, 0.05);
}
Product Card Style CSS
.product-loop-image-wrapper {
    background: #FFF8F0;
}

 .product-loop-image-wrapper > .woocommerce-loop-product__link {
    padding: 47px 53px;
    height: 300px;
}

 .product-loop-image-wrapper > .woocommerce-loop-product__link img{
    width: 100%;
    object-fit: contain;
    height: -webkit-fill-available;
}

.product-loop-wrapper {
    position: relative;
    background: #fff;
    padding: 12px 12px 20px;
	border-radius: 12px;
}

.wc-block-product-filters__overlay .wp-block-heading, .wp-block-search__label {
    font-size: 24px !important;
    font-weight: 500 !important;
    margin: 20px 0 10px !important;
}


.product-images {
    padding: 75px 25px;
    background: #fff8f07a;
    border-radius: 12px;
}

.product-images img {
    width: 255px;
    margin: auto;
}



@media (min-width: 992px) {
    .product-grid .products .product:hover .product-loop-meta:not(.no-transform) .animated-meta {
        transform: translateY(-50%);
    }
}
Blog Post Style CSS
.blog .post-loop .summary-text {
    display: none;
}

.blog .post-loop .entry-header {
    text-align: left;
}

.blog .post-loop {
    margin-bottom: 15px !important;
}

.entry-header-item.post-cover-image {
    line-height: 0;
}

.post-loop .post-cover-image img {
    object-fit: cover;
    height: 320px;
    object-fit: cover;
    border-radius: 12px;
}

.blog-layout-grid .site-main .post-loop{
	background: transparent;
}

.easyzoom-flyout {
    display: none;
}

label.wp-block-search__label {
    font-family: Poppins;
    font-weight: 400 !important;
    text-transform: none;
    line-height: 1.3;
    color: #2b2b2b;
    margin-bottom: 20px !important;
    display: flex;
}

.wp-block-search__button {
    border: 1px solid #FF782C;
    background: #FF782C;
    color: #fff;
    border-radius: 50px;
    margin: 0 !important;
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
}

.wp-block-search__inside-wrapper {
    position: relative;
}

.wp-block-search__inside-wrapper input {
    border: none;
    border-radius: 50px;
	padding: 10px 0 10px 15px;
}

#commentform input[type=submit] {
    background: #FF782C;
}

@media (min-width: 1025px){
	.site-header-inner {
    padding: 15px 0;
}
	.page-header .entry-title {
    font-size: 58px;
		text-align:center;
}
}
Cart And Checkout Page Style CSS
a.wc-block-components-button.wp-element-button.wc-block-cart__submit-button {
    background: #ff782c;
    color: #fff;
    border-radius: 50px;
}

.wc-block-components-checkout-place-order-button {
    background: #ff782c;
    color: #fff;
    border-radius: 50px;
    border: none;
}


.site-footer-widget .footer-widget figure.wp-block-image {
    width: 192px;
}

.site-footer-widget .footer-widget:first-child p {
    max-width: 150px;
    margin-top: 8px
}
Cart And Checkout Page Style CSS
a.wc-block-components-button.wp-element-button.wc-block-cart__submit-button {
    background: #ff782c;
    color: #fff;
    border-radius: 50px;
}

.wc-block-components-checkout-place-order-button {
    background: #ff782c;
    color: #fff;
    border-radius: 50px;
    border: none;
}


.site-footer-widget .footer-widget figure.wp-block-image {
    width: 192px;
}

.site-footer-widget .footer-widget:first-child p {
    max-width: 150px;
    margin-top: 8px
}

Get Your FREE Freelancing Roadmap

Stop hopping between tutorials. Grab the Freelancing Mastery Handbook to learn how to choose a skill, build your foundation, find clients, and confidently start your freelancing journey.

Free eBook Download

Related Tutorials

From learning the right skills to building a stronger digital presence, we help you turn ideas into practical, professional results.

Vibe Code a REAL Animated WordPress Website with Claude + Elementor

26.6K views

View Tutorial

Vibe Coding Full Course for Beginners – Build & Launch a Real SaaS

4.2K views

View Tutorial

Edit Videos with ChatGPT Codex — Raw Clips to Finished Reel

4.9K views

View Tutorial

Browse All Tutorials