How to Create Post Cards in the Woomen Theme

Estimated reading: 5 minutes 698 views

How to Create a Post Card

CubeWP Post Loop is a powerful tool that allows users to create and manage custom post layouts for any post type. It helps display content in card-style formats, which is useful for highlighting key pieces of content such as blog posts, events, services, or products. The plugin offers multiple pre-built layout styles that can be applied to different post types, making it easier to maintain a consistent design across your website

Follow the steps below to create and style a custom Post Card using CubeWP:

Step 1: Define Post Card Styles

1. Navigate to your WordPress Dashboard > CubeWP > Settings > Post Settings.

2. Under Create Post Card Styles, select the Post Type for which you want to create post card styles.

3. Enter the style names as comma-separated values (e.g., Style1, Style2).
This will initialize the available layout styles for your selected post type.

Step 2: Configure Post Card Settings

1. Go to WordPress Dashboard > CubeWP > Post Cards.

2. Configure the following settings:

o Select Post for Preview

o Select Post Type

o Select Loop Style (the styles created in Step 1 will appear here)

These settings will determine how the post card will appear and behave for the chosen post type.

Step 3: Design the Post Card Layout

You’ll find two primary configuration areas:

1. Edit Post Card Layout

o Add the HTML markup to structure your post card.

2. Layout CSS

o Apply custom CSS to style your post card layout.

This allows for full control over both structure and presentation.

Step 4: Use Shortcodes in HTML

In the HTML section, you can insert shortcodes available in the right sidebar. These are grouped under:

· WordPress Default Fields

· Taxonomies

· Author

· CubeWP UI & Custom Tags

· WooCommerce

Example: Adding a Shortcode in HTML

To display the post title and content with a link, use the following structure:

				
					<div class="cwp-post-content-container"> <div class="cwp-post-content"> <h4><a href=" [loop_post_link] "> [loop_the_title] </a> </h4> [loop_the_content] </div> <ul class="cwp-post-terms"> <li> <a href=" [loop_property_type_tax_link] "> [loop_property_type] </a> </li> </ul> </div>

Default HTML Code (You can make amendments according to yours)

				
					<div [loop_woo_post_class]>
    <div class="fashion-v3-card-1-main">
        <div class="fashion-v3-card-1">
            <div class="fashion-v3-card-1-thumbnail">
                <a href="[loop_post_link]">
                    <img decoding="async" src="[loop_featured_image]" alt="featured-image">
                </a>
                <div class="fashion-v3-card-1-save save-tooltip" data-tooltip="Add To Wishlist" data-flow="left">
                    [loop_post_save]
                </div>
                <div class="fashion-v3-card-1-cart-btn">
                    <div class="fashion-v3-card-1-cart women-wc-quick-checkout" data-tooltip="Add To Cart"
                        data-flow="up" data-productid="[loop_woo_product_id]">
                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                            <g clip-path="url(#clip0_10803_559)">
                                <path
                                    d="M11.22 5.46562H6.82005V1.06559C6.82005 0.762058 6.57362 0.515625 6.26999 0.515625C5.96645 0.515625 5.72002 0.762058 5.72002 1.06559V5.46562H1.31999C1.01645 5.46562 0.77002 5.71206 0.77002 6.01559C0.77002 6.31923 1.01645 6.56566 1.31999 6.56566H5.72002V10.9656C5.72002 11.2692 5.96645 11.5157 6.26999 11.5157C6.57362 11.5157 6.82005 11.2692 6.82005 10.9656V6.56566H11.22C11.5236 6.56566 11.7701 6.31923 11.7701 6.01559C11.7701 5.71206 11.5236 5.46562 11.22 5.46562Z"
                                    fill="#00174F" />
                            </g>
                            <defs>
                                <clipPath id="clip0_10803_559">
                                    <rect width="11" height="11" fill="white" transform="translate(0.77002 0.515625)" />
                                </clipPath>
                            </defs>
                        </svg>
                    </div>
                </div>
                <div class="fashion-v3-card-1-tags">
                    <p class="tag-new wc-women-remove-empty">[loop_woo_new]</p>
                    <p class="tag-sale wc-women-remove-empty">[loop_woo_on_sale]</p>
                    <p class="tag-percent wc-women-remove-empty">Save [loop_woo_discount_percentage]</p>
                </div>
            </div>
            <div class="fashion-v3-card-1-content">
                <div class="title-price">
                    <a href="[loop_post_link]">
                        <span class="fashion-v3-card-1-title">[loop_the_title]</span>
                    </a>
                    <p class="fashion-v3-card-1-price">[loop_woo_normal_price]</p>
                </div>
                <div class="fashion-v3-card-1-colors women-wc-quick-checkout" data-productid="[loop_woo_product_id]">
                    <p>More Colors</p>
                    [loop_woo_color]
                </div>
            </div>
        </div>
    </div>
</div>

Default CSS Code

				
					.fashion-v3-card-1 {
    display: flex;
    flex-direction: column;
}

.fashion-v3-card-1-content {
    gap: 9px;
    display: flex;
    flex-direction: column;
    padding: 17px 16px 2px 16px;
}

.fashion-v3-card-1-save {
    position: absolute !important;
    top: 19px;
    right: 27px;
    z-index: 99;
    opacity: 0;
    transition: .3s;
}

.fashion-v3-card-1-save .cwp-single-save-btns.cwp-single-widget span.cwp-main,
.fashion-v3-card-1-save .cwp-single-share-btn.cwp-single-widget span.cwp-main {
    border-radius: 100%;
    padding: 2px 0px 0px 0px;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-color: #fff;
}

.fashion-v3-card-1-save .cwp-single-save-btns.cwp-single-widget span.cwp-main svg path,
.fashion-v3-card-1-save .cwp-single-share-btn.cwp-single-widget span.cwp-main svg path {
    color: #000000;
}

.fashion-v3-card-1-save .cwp-single-save-btns.cwp-single-widget span.cwp-main svg,
.fashion-v3-card-1-save .cwp-single-share-btn.cwp-single-widget span.cwp-main svg {
    width: 12px;
    display: none;
}

.fashion-v3-card-1-save .cwp-main:after {
    content: "\f02e";
    font-family: "Font Awesome 6 Free";
    font-weight: 400;
    color: #00174F;
    font-size: 14px;
}

.fashion-v3-card-1-save .cwp-main.cwp-save-post:after {
    font-weight: 400;
}

.fashion-v3-card-1-save .cwp-main.cwp-saved-post:after {
    font-weight: 600;
}

.fashion-v3-card-1-title {
    font-weight: 500;
    font-size: 14px;
    line-height: 14px;
    text-transform: capitalize;
    transition: .3s;
    color: #00174F;
}

.fashion-v3-card-1-title:hover {
    color: #00174F;
}

.fashion-v3-card-1-price {
    font-weight: 400;
    font-size: 13px;
    line-height: 100%;
    color: #767676;
}

.fashion-v3-card-1-colors .color-attributes .color-swatch {
    width: 15px;
    height: 15px;
    display: inline-block;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0px 0px 1px 1px #E6E6E6;
    transition: .3s;
}

.fashion-v3-card-1-colors .color-attributes .color-swatch:hover {
    box-shadow: 0px 0px 1px 1px #00174F;
}

.fashion-v3-card-1-colors .color-attributes {
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: center;
    gap: 10px;
    display: none;
    cursor: pointer;
}

.fashion-v3-card-1-colors label {
    position: relative;
    padding: 18px 0px 0px 10px;
    margin-left: 16px;
}

.fashion-v3-card-1-colors input[type="radio"] {
    display: none;
}

.fashion-v3-card-1-colors .color-attributes li {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 15px;
}

.fashion-v3-card-1-save[data-tooltip][data-flow^=left]::before {
    border-left-color: #00174F;
}

.fashion-v3-card-1-save[data-tooltip]::after {
    background-color: #00174F;
}

.fashion-v3-card-1-cart[data-tooltip][data-flow^=left]::before {
    border-left-color: #00174F;
}

.fashion-v3-card-1-cart[data-tooltip]::after {
    background-color: #00174F;
}

.fashion-v3-card-1-save .woo-ajax-loader {
    align-items: center;
    justify-content: center;
}

.fashion-v3-card-1-thumbnail {
    overflow: hidden;
    position: relative;
}

.fashion-v3-card-1-thumbnail img {
    width: 100%;
    height: auto;
    transition: 3000ms;
}

.fashion-v3-card-1:hover .fashion-v3-card-1-thumbnail img {
    transform: scale(1.1);
}

.fashion-v3-card-1-content .title-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.fashion-v3-card-1-content .title-price a {
    width: 75%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fashion-v3-card-1-colors p {
    font-weight: 400;
    font-size: 13px;
    line-height: 15px;
    text-transform: capitalize;
    color: #767676;
    display: block;
}

.fashion-v3-card-1-cart-btn {
    position: absolute;
    bottom: 19px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: .3s;
}

.fashion-v3-card-1-cart {
    background: #FFFFFF;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 120px;
    cursor: pointer;
}

.fashion-v3-card-1:hover .fashion-v3-card-1-colors .color-attributes {
    display: flex;
}

.fashion-v3-card-1:hover .fashion-v3-card-1-colors p {
    display: none;
}

.fashion-v3-card-1:hover .fashion-v3-card-1-cart-btn,
.fashion-v3-card-1:hover .fashion-v3-card-1-save {
    opacity: 1;
}

.fashion-v3-card-1-tags {
    position: absolute;
    left: 10px;
    top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fashion-v3-card-1-tags p {
    padding: 8px 10.5px;
    font-weight: 500;
    font-size: 12px;
    line-height: 12px;
    text-transform: uppercase;
    color: #040C13;
    width: fit-content;
    border-radius: 4px;
}

.fashion-v3-card-1-tags .tag-new {
    background: #FFFFFF;
    color: #1D1D1D;
}

.fashion-v3-card-1-tags .tag-sale {
    background: #1D1D1D;
    color: #ffffff;
}

.fashion-v3-card-1-tags .tag-percent {
    background: #A50118;
    color: #ffffff;
}

.cubewp-filters-style1.fashion-v3-shop-post .cwp-grids-container {
    gap: 36px 0px;
    padding: 0px !important;
}

.elementor-widget-vp_saved_products .col-6 {
    margin-bottom: 20px;
}

.cwp-grids-container .col-md-3 {
    transition: .3s;
}

.cwp-grids-container.columns-2 .col-md-3 {
    width: 33.333%;
}

.woocommerce .cross-sells .fashion-v3-card-1-colors p {
    text-align: left;
}

.woocommerce .cross-sells .fashion-v3-card-1-content .title-price a {
    text-align: left;
}

.woocommerce .cross-sells .col-6 {
    margin-bottom: 20px;
}

.woocommerce .cross-sells .fashion-v3-card-1-content .color-attributes {
    margin: 0;
    align-items: center;
    justify-content: left;
}

.woocommerce .cross-sells .fashion-v3-card-1-content .color-attributes li {
    width: auto !important;
}

.woocommerce .cross-sells .fashion-v3-card-1-content .color-attributes::before {
    display: none;
}

.fashion-v3-card-1-colors {
    position: relative;
    width: fit-content;
    padding-bottom: 5px;

}

@media (max-width:768px) {
    .fashion-v3-card-1-content .title-price {
        gap: 7px;
    }

    .cubewp-filters-style1.fashion-v3-shop-post .col-md-3 {
        width: 50% !important;
    }

    .cwp-grids-container.columns-2 .col-md-3 {
        width: 50%;
    }

    .fashion-v3-card-1-content {
        padding: 15px 0px 0px 0px;
    }
}

.wp-admin .fashion-v3-card-1-colors p {
    display: block !important;
    margin: 0px;
}

Zemowp

Did You Know?