Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add product details pattern (https://github.com/woocommerce/woocommerce-blocks/pull/9408) 

* Add product details pattern

* Replace stars image
This commit is contained in:
Roy Ho 2023-05-09 08:15:03 -07:00 committed by GitHub
parent 796f16880a
commit e6a58ab90c
4 changed files with 139 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
plugins/woocommerce-blocks/images/pattern-placeholders/product-furniture-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 122 KiB

BIN
plugins/woocommerce-blocks/images/pattern-placeholders/product-furniture-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 105 KiB

BIN
plugins/woocommerce-blocks/images/pattern-placeholders/product-furniture-3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 259 KiB

139
plugins/woocommerce-blocks/patterns/product-details-pattern.php Normal file
View File

@ -0,0 +1,139 @@
<?php
/**
* Title: Product Details Pattern
* Slug: woocommerce-blocks/product-details-pattern
* Categories: WooCommerce
*/
?>
<!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"top":"0","left":"0"}}}} -->
<div class="wp-block-columns alignwide">
<!-- wp:column {"style":{"spacing":{"padding":{"top":"0","right":"50px","bottom":"0","left":"0px"},"blockGap":"0px"}}} -->
<div class="wp-block-column" style="padding-top:0;padding-right:50px;padding-bottom:0;padding-left:0px">
<!-- wp:image {"id":1,"width":500,"height":723,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized">
<img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/product-furniture-3.png', dirname( __FILE__ ) ) ); ?>" alt="" class="wp-image-1" width="500" height="723"/>
</figure>
<!-- /wp:image -->
<!-- wp:columns {"style":{"spacing":{"blockGap":{"top":"0","left":"0"},"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"margin":{"top":"0.2em","bottom":"0.2em"}}}} -->
<div class="wp-block-columns" style="margin-top:0.2em;margin-bottom:0.2em;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
<!-- wp:column {"width":"243px","style":{"spacing":{"padding":{"top":"0px","right":"5px","bottom":"0px","left":"0px"},"blockGap":"0"}},"layout":{"type":"default"}} -->
<div class="wp-block-column" style="padding-top:0px;padding-right:5px;padding-bottom:0px;padding-left:0px;flex-basis:243px">
<!-- wp:image {"id":1,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full">
<img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/product-furniture-2.png', dirname( __FILE__ ) ) ); ?>" alt="" class="wp-image-1"/>
</figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column {"width":"244px","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"blockGap":"0px"}},"layout":{"type":"default"}} -->
<div class="wp-block-column" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;flex-basis:244px">
<!-- wp:image {"id":1,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full">
<img src="<?php echo esc_url( plugins_url( 'images/pattern-placeholders/product-furniture-1.png', dirname( __FILE__ ) ) ); ?>" alt="" class="wp-image-1"/>
</figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:heading {"textColor":"foreground","fontSize":"x-large"} -->
<h2 class="wp-block-heading has-foreground-color has-text-color has-x-large-font-size">Herriott 40" Solid Wood Console Table</h2>
<!-- /wp:heading -->
<!-- wp:group {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"blockGap":"0px","margin":{"top":"10px","bottom":"0px"}}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group" style="margin-top:10px;margin-bottom:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px">
<!-- wp:paragraph {"textColor":"luminous-vivid-amber"} -->
<p class="has-luminous-vivid-amber-color has-text-color">★★★★</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"color":{"text":"#ffe8a4"},"spacing":{"margin":{"right":"5px"}}}} -->
<p class="has-text-color" style="color:#ffe8a4;margin-right:5px">★</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"0.7em"}},"textColor":"foreground"} -->
<p class="has-foreground-color has-text-color" style="font-size:0.7em"> <strong>4.2</strong>(1,079 reviews)</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->
<!-- wp:group {"style":{"spacing":{"blockGap":"8px","padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"margin":{"top":"2px","bottom":"0px"}}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group" style="margin-top:2px;margin-bottom:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px">
<!-- wp:paragraph {"style":{"typography":{"fontSize":"1.2em"}},"textColor":"foreground"} -->
<p class="has-foreground-color has-text-color" style="font-size:1.2em"><strong><sup><sub>$</sub></sup>158.99</strong></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"0.7em"},"layout":{"selfStretch":"fit","flexSize":null}},"textColor":"foreground"} -->
<p class="has-foreground-color has-text-color" style="font-size:0.7em"><s>was $173.99</s></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"0.7em"}},"textColor":"vivid-red"} -->
<p class="has-vivid-red-color has-text-color" style="font-size:0.7em"><strong>9% off</strong></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:group {"style":{"spacing":{"blockGap":"0px","margin":{"top":"5px"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="margin-top:5px">
<!-- wp:paragraph {"style":{"color":{"text":"#00a510"},"typography":{"fontSize":"0.7em"},"spacing":{"margin":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}} -->
<p class="has-text-color" style="color:#00a510;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;font-size:0.7em"><strong>Free 2-Day Shipping</strong></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group">
<!-- wp:paragraph {"style":{"typography":{"fontSize":"0.8em"}},"textColor":"foreground"} -->
<p class="has-foreground-color has-text-color" style="font-size:0.8em">Crafted from solid wood with a rich walnut finish, this table exudes warmth and sophistication. The clean lines and minimalist design effortlessly complement a variety of interior styles, from modern to rustic. With its spacious tabletop, the Urban Loft Dining Table comfortably seats six guests, making it ideal for family dinners, social gatherings, and special occasions. The sturdy construction ensures lasting durability, while the easy-to-clean surface allows for hassle-free maintenance.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"foreground","textColor":"background"} -->
<div class="wp-block-button">
<a class="wp-block-button__link has-background-color has-foreground-background-color has-text-color has-background wp-element-button">Add to cart</a>
</div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group -->
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"fontSize":"0.8em"}},"textColor":"foreground"} -->
<p class="has-foreground-color has-text-color" style="font-size:0.8em"><strong>Features</strong></p>
<!-- /wp:paragraph -->
<!-- wp:list {"style":{"spacing":{"margin":{"top":"10px","right":"0","bottom":"0","left":"0"}}},"textColor":"foreground"} -->
<ul class="has-foreground-color has-text-color" style="margin-top:10px;margin-right:0;margin-bottom:0;margin-left:0">
<!-- wp:list-item {"style":{"typography":{"fontSize":"0.8em"}}} -->
<li style="font-size:0.8em">Top shelf weight capacity of 100 lbs</li>
<!-- /wp:list-item -->
<!-- wp:list-item {"style":{"typography":{"fontSize":"0.8em"}}} -->
<li style="font-size:0.8em">Drawer weight capacity of 50 lbs</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></div>
<!-- /wp:group -->
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group">
<!-- wp:paragraph {"style":{"typography":{"fontSize":"0.8em"}},"textColor":"foreground"} -->
<p class="has-foreground-color has-text-color" style="font-size:0.8em"><strong>Weight and Dimensions</strong></p>
<!-- /wp:paragraph -->
<!-- wp:table {"style":{"typography":{"fontSize":"0.7em"}},"backgroundColor":"background","textColor":"foreground","className":"is-style-stripes"} -->
<figure class="wp-block-table is-style-stripes" style="font-size:0.7em">
<table class="has-foreground-color has-background-background-color has-text-color has-background">
<tbody>
<tr><td>Overall</td><td>36.5'' H X 40'' W X 20'' D</td></tr>
<tr><td>Drawer Interior</td><td>2'' H X 29.25'' W X 12.5'' D</td></tr>
<tr><td>Countertop</td><td>40'' W X 20'' D</td></tr>
<tr><td>Countertop Thickness</td><td>0.7'' H</td></tr>
<tr><td>Overall Product Weight</td><td>39.6 lb.</td></tr>
</tbody>
</table>
</figure>
<!-- /wp:table --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->