Imprint is a super minimalist GeneratePress Shop Site. Designed for selling posters, prints and single image products. No sidebars, no gallery, no distractions. It however has received some custom styling with a couple of hook elements and some CSS.<\/p>
The site is using 5 hook elements that can be found in the Dashboard > Appearance > Elements. They are:<\/p>
These two hooks opens and closes a simple div around the Shop product title and price which allows them to be displayed inline.<\/p>
This hook adds the Next and Previous links to the single product page<\/p>
These two hooks are used to add the social media icons to the shop.<\/p>
All of the Custom CSS added to the site can be found in the Customizer > Additional CSS. The majority of it is related to the shop and single product styling. All CSS has title comments to make it easier to find.<\/p>
The site uses the Navigation as Header ( set in Customizer > Layout > Header ) and some simple CSS found under \/— Navigation Center branding —<\/em>\/ and does the following:<\/p> The Buttons have had some CSS treatment to add border radius and to create the show on hover effect for the shop. The CSS controlling this is found under: There are several CSS properties that are fairly self explanatory but here is some details:<\/p> \/* Staggered 3 and 4 column grid *\/<\/p> This simple CSS changes the vertical position of the outer two columns of the grid. It works with 3 or 4 column layouts on desktop only<\/p> \/* Image border radius *\/<\/p> Adds a border radius to the shop product image<\/p> \/* Title Price wrapper alignment *\/ <\/p> Flex styling for title and price alignment using Hook: Shop Loop Info Wrap.<\/p> The Single Product has several style changes and includes the custom Single Product Next Previous Links added by the Hook mentioned above. All of the styling can be found under \/— Woocommerce Single Product —<\/em>\/. It includes:<\/p> \/* Layout *\/<\/p> This changes the layout of the page to a single column and centre aligns the summary content.<\/p> \/* Hide Magnifier until hovered *\/<\/p> Simply hides the light box magnifier icon until the image is hovered upon.<\/p> \/* Remove border from QTY buttons *\/<\/p> Keeping everything minimal this CSS removes the border from the qty buttons, oh and the page navigation on the shop.<\/p> \/* Constrain width of summary *\/<\/p> This sets a max width to our product summary to keep it within the width of the image.<\/p> \/* Next Previous Buttons *\/<\/p> The styling required for the custom Next Previous buttons added using Hook: Single Product Next Previous<\/p> Adjusting the orientation of the icons on the shop page and their centre alignment on the product page. The one piece of CSS you may require to adjust is this:<\/p> This overwrites the color fo the icons on the shop page.<\/p>","protected":false},"excerpt":{"rendered":"Buttons<\/h3>
\/— Woocommerce Buttons —<\/em>\/<\/p>Shop Layout<\/h3>
Single Product<\/h3>
Social Icons<\/h3>
.inside-wc-product-image #gp-social-share a svg {\n\tfill: #fff !important;\n}<\/code><\/pre>