BuildingOnWordPress (with Josh Donnelly)
BuildingOnWordPress (with Josh Donnelly)
  • 47
  • 160 812
Customizable WooCommerce Add To Cart Form Element
As you know, I'm a huge fan of the Cornerstone builder and the ability to create quasi-native elements using the built-in parameter editor & custom css. My latest element is an easily customizable add to cart form which can be downloaded from pixels.buildingonwp.com/
I'm playing with the idea of premium elements given how much work goes into building these. Hope ya'll find this useful.
zhlédnutí: 412

Video

Gradient Element for the Cornerstone Builder
zhlédnutí 368Před 4 měsíci
This was a ton of fun to put together and I simply needed somebody to geek out with. So I'm sharing this here for my fellow geeks. This is an experimental element that I started working on last night for kicks and giggles. It leverages the native Cornerstone div element custom parameters custom CSS. Seriously, with easy to edit parameters and element level CSS the sky is truly the limit.
The simplest way to create WordPress staging sites
zhlédnutí 328Před 5 měsíci
All too often the question is asked "how do I create a staging site?" Sure, there are plenty of ways to spin up staging sites for your WordPress builds but Insta WP has got to be one of the simplest. Whether you're looking to simply test a plugin, create a proof of concept, debug a site, or build an entire project, InstaWP is the most complete solution on the market. Best of all it is free to g...
Creating sticky containers in WordPress & Cornerstone
zhlédnutí 557Před 5 měsíci
Easily create containers that scroll with you on a page. *Update*: Looks like I left out a crucial piece which I didn't even realize I already had on this sandbox site. You'll need to set your body overflow-x to visible. This only needs to be done once. Perhaps there will be a better / more native way to do this in the future. For now simply add the following to your Global CSS. body {overflow-...
Cornerstone gallery slider using native elements
zhlédnutí 705Před 7 měsíci
A baseline tutorial on building your own custom thumbnail gallery slider natively in cornerstone. No plugins. No code. Download a baseline version: buildingonwp.com/elements/bowp-gallery-slider/
Custom Dynamic Content: Read Time Calculation
zhlédnutí 357Před 8 měsíci
Did you know that you can relatively easily tap into the Cornerstone builder's native dynamic content feature via the Dynamic Content API and create your own custom fields of dynamic content? It's true. In this tutorial we're going to look at how to create a custom read time value that is calculated based on the page's text length and we're going to do it all without needing to add feature spec...
The fastest way to translate your WordPress websites for FREE!
zhlédnutí 456Před 8 měsíci
Translating your site can be both incredibly beneficial to your end users and painstakingly complicated for you. It can also be a tedious or complicated process. There are several great tools out there for WordPress that approach translation from a few different perspectives - but this one (gtranslate.io/) has got to be one of the simplest to setup, leverages Google Translate's realtime transla...
How to create custom submit buttons for your Gravity Forms and place them anywhere 🎉
zhlédnutí 1,3KPřed 9 měsíci
There are plenty of reasons why you might want to create your own custom Gravity Forms submit buttons - from simply wanting more control over style and graphics to being able to disconnect your submit button from the the form container itself and place that button anywhere on your page. This is especially useful when creating mini-applications using Gravity Forms (as you know, I’m a huge fan of...
Easily add icons to your gravity forms fields
zhlédnutí 757Před 9 měsíci
In this quick tutorial we'll take a look at how to easily add Font Awesome icons to your Gravity Forms fields. Step 1: Add Field Classes | 00:40 Step 2: Target Field Classes with CSS | 2:20 Step 3: Add Icons | 3:15 CSS used in this video: buildingonwp.com/easily-add-font-awesome-icons-to-your-gravity-forms-fields/
Cornerstone Builder 7.4.0 Beta Overview
zhlédnutí 457Před 9 měsíci
I know not everybody participates in the beta rounds and for those of us visual learners (myself included) change logs can seem like reading latin at times. So for those of you interested in some of the highlights included in the latest Cornerstone builder beta (released 10/04/2023) - this video is for you 🎉 There’s a ton of great quality of life improvements in this update as well as some grea...
Easily create, train, and launch a custom ChatGPT chatbot on your site in under 60 seconds.
zhlédnutí 633Před 9 měsíci
With the ongoing AI revolution there seem to be new tools popping up daily. Some of them clutter and some of them real gems. Today's video covers one of the tools that I'd consider a gem - and the best part is that it's just getting started: Chatbase. Affiliate link: www.chatbase.co/?via=bowp 🎉 Chatbase allows you to effortlessly train, style, and deploy a ChatGPT powered AI solution that is po...
How to autoplay embedded YouTube videos in 2023
zhlédnutí 30KPřed 10 měsíci
Welcome to Building on Wordpress! In todays tutorial we are going to answer the recurring question: "How do I create an autoplay for my embedded CZcams videos?" We'll keep things simple and to the point and cover the basics on how to autoplay embedded CZcams videos in 2023 using nothing more than the built-in CZcams iframe video embed code html and some nifty little url parameters. Autoplaying ...
Easily modernize your form Thank You pages.
zhlédnutí 328Před 10 měsíci
Bring your form confirmation pages to life with a few simple techniques: Create your form | 0:20 Create your page | 1:20 Add your form | 1:32 Create your thank you section | 2:30 Add effects | 3:38 Add conditional logic | 4:18 Add parameters | 5:00 Update your Gravity Form Confirmation Page | 5:24 Add Lottie animations | 6:40 Bring it all together | 9:12 ✅ Video: Styling your Gravity Forms: czc...
Unlocking the full potential of WordPress with Custom Post Types and Custom Fields
zhlédnutí 3,7KPřed 10 měsíci
Trust me, I've been there. The terminology used within the WordPress ecosystem can be frustrating to wrap your head around. Why? Well, we have the default blog posts, then we have this larger concept of post types, then we have custom post types, then we have post archives, then we have singe post layouts, then we have meta fields. What is all of this and what does it mean? The goal of this vid...
Power your WordPress loopers with live Google Sheets data 🎉
zhlédnutí 783Před rokem
Power your WordPress loopers with live Google Sheets data 🎉
Build your own scroll depth progress bar in less than 5 minutes ⏱ 🎉
zhlédnutí 442Před rokem
Build your own scroll depth progress bar in less than 5 minutes ⏱ 🎉
Easily Style Your Gravity Forms!
zhlédnutí 3,1KPřed rokem
Easily Style Your Gravity Forms!
Wordpress pricing table with toggled views!
zhlédnutí 1,1KPřed rokem
Wordpress pricing table with toggled views!
Building out a fully functional mini-application on WordPress - A to Z
zhlédnutí 1,1KPřed rokem
Building out a fully functional mini-application on WordPress - A to Z
Ultimate Gravity Forms Hack - Part II
zhlédnutí 394Před rokem
Ultimate Gravity Forms Hack - Part II
Ultimate Gravity Forms Hack - Part I
zhlédnutí 737Před rokem
Ultimate Gravity Forms Hack - Part I
No idea what to call this - just a bunch of random fun website build stuff
zhlédnutí 468Před rokem
No idea what to call this - just a bunch of random fun website build stuff
This tool will change your web design game for good - MarkUp
zhlédnutí 802Před rokem
This tool will change your web design game for good - MarkUp
How To Customize The WooCommerce Cart Without Plugins
zhlédnutí 9KPřed rokem
How To Customize The WooCommerce Cart Without Plugins
Customize the WooCommerce Checkout - No Plugins Required!
zhlédnutí 30KPřed rokem
Customize the WooCommerce Checkout - No Plugins Required!
Create Elegant Hover Effects In WordPress - No Code!
zhlédnutí 876Před rokem
Create Elegant Hover Effects In WordPress - No Code!
Easy WordPress Drag and Drop Mega Menu! - Cornerstone Builder
zhlédnutí 1,4KPřed rokem
Easy WordPress Drag and Drop Mega Menu! - Cornerstone Builder
Customize The WooCommerce My Account Page In 30 Minutes - No code!
zhlédnutí 6KPřed rokem
Customize The WooCommerce My Account Page In 30 Minutes - No code!
Effortlessly translate complex code into plain English
zhlédnutí 636Před rokem
Effortlessly translate complex code into plain English
This is the future of the WordPress Admin
zhlédnutí 39KPřed rokem
This is the future of the WordPress Admin

Komentáře

  • @nguyenthaibaofplhcm5872

    I was tryna do a rickroll but this broke me

  • @beverlybattle3736
    @beverlybattle3736 Před 9 dny

    Thanks. That was very helpful but its still not playing my playlist. Just plays one song then it stops. I'm attempting to embed music videos.

  • @wealthentrepreneurSA

    You are a legend! I see the code to remove the Billing Details headline is not included on the code sample on your website? Could you maybe assist with that? Stay Cool! & Tx for what you are doing for WP Community!

    • @buildingonwordpress
      @buildingonwordpress Před 6 dny

      Thanks @wealthentrepreneurSA! Happy to help. Simply use .woocommerce-billing-fields h3 {display:none;} to remove the Billing Details headline.

  • @craigbonnyman
    @craigbonnyman Před 11 dny

    Beautiful. Thanks man

  • @janetdelacruz1023
    @janetdelacruz1023 Před 11 dny

    Is there a way to do this without the ACF Pro?

    • @buildingonwordpress
      @buildingonwordpress Před 11 dny

      Absolutely. You could setup something like a self looping element and add the gallery items to the element parameters themselves. The video below explains that in more detail: czcams.com/video/BnmyASlK8eo/video.html

    • @janetdelacruz1023
      @janetdelacruz1023 Před 10 dny

      @@buildingonwordpress THANK YOU! I was able to build it using the self-looping element 🥳

  • @swanniebatista1273
    @swanniebatista1273 Před 13 dny

    This didn't work for me. I followed step by step. Does Gravity forms not support Font Awesome?

  • @gabrieladekoya3152
    @gabrieladekoya3152 Před 18 dny

    This is a great video, thank you. The only issue is that it is not responsive on mobile and tab, is that adjustable? Thank you again.

  • @krystianciarkowski2336

    is there any way to set autoplay quality?

  • @RethinkMyBusiness
    @RethinkMyBusiness Před 21 dnem

    Got the two tables built out, button added, now I can't get the JS to work. :| Any other tips @buildingonwordpress ?

  • @zeljkojagust7521
    @zeljkojagust7521 Před 22 dny

    I'm using Themeco Pro with Cornerstone builder and your channel is an El Dorado!

  • @ruslanhal
    @ruslanhal Před 22 dny

    Good afternoon. I looked at your lessons on how to create a display setting for the “Blog posts” page using the Archive Layout. And pagination worked correctly at the same time. And then I saw your interesting post on setting up filters from the topic and a link to the video: Filter looper content with buttons. And after setting up Looper Provider, record pagination stopped working.

  • @ComfortTimes247
    @ComfortTimes247 Před 26 dny

    Thanks

  • @NobuMusekiwa
    @NobuMusekiwa Před měsícem

    YOU are the real MVP! Thank you!!!

  • @Researching.Israel
    @Researching.Israel Před měsícem

    Great video, amazing content! thanks a lot!

  • @sheabrown
    @sheabrown Před měsícem

    I wanted to download the file from the description, but it's gone from the site :(

    • @buildingonwordpress
      @buildingonwordpress Před měsícem

      @sheabrown Ah yes - sorry about that. I started moving all of my files over to a more organized template-focused website at pixels.buildingonwp.com. Most of them and more are live over there. That said, this one is not there yet as it is officially being included in the next release of Cornerstone.

    • @sheabrown
      @sheabrown Před 29 dny

      @@buildingonwordpress Wow! That is great to hear about the inclusion in the next release of Cornerstone! I hope you get kickbacks from it, you deserve it. Your content is fantastic.

  • @glendacoswello6703
    @glendacoswello6703 Před měsícem

    Is it possible to change the company name before the first and last name. My goal is to have showing on the orders as this: #7100 Company Name not personal name

  • @MyWealthyLiving
    @MyWealthyLiving Před měsícem

    embedding youtube but sound is muted

  • @selaneio
    @selaneio Před měsícem

    Awesome, thanks Josh!

  • @selaneio
    @selaneio Před měsícem

    That is really cool Josh! Thanks for the tutorials on Pro Theme!

  • @DerNeugierige
    @DerNeugierige Před měsícem

    Hey! Thank you for the great video. Now I'm in the implementation phase and encountering the following issue. I need your advice on a URL problem. My goal is to have a nested URL structure, but I'm having trouble achieving it. Here's an example: - I've created a CPT "Wiki" and a taxonomy with multiple levels, also in ACF: - Main category - Subcategory I want the permalink for the post to look like this: /wiki/main-category/subcategory/post But currently, the permalink looks like this: /wiki/post The same for the category archive page: /wiki/main-category/subcategory instead of this: wiki/taxonomy/main-category/subcategory Thanks in advance! Best regards,

  • @TiWMusic
    @TiWMusic Před měsícem

    Its not displaying on Safari for me .

    • @buildingonwordpress
      @buildingonwordpress Před měsícem

      @TiWMusic What isn't showing up for you? The element as a whole or just the custom styles? Does the standard ATC element work in Safari for you? This element simply leverages the native element and adds some custom CSS. Perhaps there's some compatibility issues with my CSS for safari.

  • @Coclabs
    @Coclabs Před měsícem

    How add "auto loop" ?

  • @marcvan367
    @marcvan367 Před měsícem

    "No Plugins". Proceeds to use plugins.

  • @andersonaf
    @andersonaf Před 2 měsíci

    For some reason, my carrosel don't change the main photo when I click on the arrows or thumbnails.

    • @buildingonwordpress
      @buildingonwordpress Před 2 měsíci

      Hi @andersonaf - odd. Did you set context around the parent container? 1:30

    • @andersonaf
      @andersonaf Před 2 měsíci

      ​@@buildingonwordpress Thank you for really fast help here! I put the custom attribute as "data-x-slide-contex" for the Div Thumbnail Gallery Slider. I'm doing all over again to check if I missed something.

    • @andersonaf
      @andersonaf Před 2 měsíci

      @@buildingonwordpress It is working, I just put a background colour for the main div and I realize the slider was outside of the main div. Thank you for the tutorial!

    • @buildingonwordpress
      @buildingonwordpress Před 2 měsíci

      @@andersonaf - happy to help! This may already be what you are attempting but both sliders need to function as if they are one slider. So you'll notice I placed both sliders (large feature + thumbnails) into a single parent div container. Then that parent div container is what gets the data-x-slide-context.

  • @DanielKwan
    @DanielKwan Před 2 měsíci

    Can anyone show how to use custom fields with the Twenty Twenty-Four theme that comes pre-installed with WordPress?

  • @chadelliottfahlman
    @chadelliottfahlman Před 2 měsíci

    Super good, thank you. I'm glad that someone is giving this theme some love.

  • @FinchAdventures
    @FinchAdventures Před 2 měsíci

    Hello Josh. How would you deal with aspect ratios on the main viewport?

    • @buildingonwordpress
      @buildingonwordpress Před 2 měsíci

      Hi @FinchAdventures - great question. You could change the "object fit" from cover to "contain" or you could use an image element inside of the div instead of using the image property of the div itself.

  • @poweredbyrock
    @poweredbyrock Před 2 měsíci

    Incredibly helpful. Thanks for this.

  • @fabibaeza
    @fabibaeza Před 2 měsíci

    Thanks, suscribed!

  • @musiklemontv
    @musiklemontv Před 2 měsíci

    You are seriously, the MAN!👊

    • @musiklemontv
      @musiklemontv Před 2 měsíci

      Having issues with the CSS. The problem I am having is that the left side column isn't full width and I have a huge gap between the left column and the right column. Just cannot seem to work out why this is happening. Any ideas? Also mobile doesn't display correctly

    • @buildingonwordpress
      @buildingonwordpress Před 2 měsíci

      ​@@musiklemontv Have made some refinements to the CSS and actually just pushed those out to the page on buildingonwp.com/easily-customize-the-woocommerce-checkout-without-plugins/ Try now.

  • @rajibthebutterfly3744
    @rajibthebutterfly3744 Před 2 měsíci

    when this video autoplay in website , but this view didn't count in youtube. How can i fixed it?

    • @buildingonwordpress
      @buildingonwordpress Před 2 měsíci

      Unfortunately, autoplay typically won't count toward a user view as the user didn't initiate the play action.

  • @echo4261
    @echo4261 Před 2 měsíci

    just at the time i needed it, you are awesome bro, keep it up ❤

  • @webrafting
    @webrafting Před 2 měsíci

    i only need /*Form Field Styles*/ part... it worked perfect, thanks!!!

  • @dozhadeville444
    @dozhadeville444 Před 3 měsíci

    Does this work with embedded songs from spotify or apple music? 🤔

  • @BigG87
    @BigG87 Před 3 měsíci

    If you add &mute=0 it will autoplay unmuted. it worked for my use but i cant say ive tesed it on all platforms.

  • @developedbyjoe
    @developedbyjoe Před 3 měsíci

    Just purchased this and It's cool

  • @dansimeone8225
    @dansimeone8225 Před 3 měsíci

    Hey Josh, I have just implemented this without any issues, great tutorial. Just wondering if you could help with extending this so that when no events are present (or more tot he point, when all events which could still be technically published but all are expired), a "there are no events to show, please check back later" message could be displayed. How can that sort of conditional logic be tooled in this use case?

  • @jeanluccarbonel5655
    @jeanluccarbonel5655 Před 3 měsíci

    That's a great tutorial

  • @go-at-alex
    @go-at-alex Před 3 měsíci

    Hi, just purchased this template and it works fine for variable products! But it isn't working quite the same way for simple product types... Maybe some feedback to improve the template: if I want to order let's say 3 sneakers, wouldn't it be nice for the user to see the total price? So $150 (3 x $50) instead of the static $50 (with the counter on 3)? :) Either way, appreciate your passion to make this theme better for everyone! Your tutorials helped me already a lot

    • @buildingonwordpress
      @buildingonwordpress Před 3 měsíci

      Thanks @go-at-alex! Appreciate your feedback and taking the time to leave a comment. The Add To Cart Form is typically used for variable products but curious what isn't working about it for single products? The Add To Cart Form doesn't support ajax natively (which the simple product button does) so you'd need to use an external tool for that. Some solid plugins out there for adding ajax add-to-cart. Love the idea of a live price update. Might need to think through that a bit. My goal was to leverage as much of the native element as possible without custom overrides, additional php, javascript or other complex additions - and this is how the native element works. Really do appreciate the feedback. Thanks!

    • @go-at-alex
      @go-at-alex Před 3 měsíci

      @@buildingonwordpress if I'm adjusting a single layout for a simple product, the counter and the add to cart button are not in the same row, they are sticking under each other. I can't move the spacing between these two. The price isn't showing aswel, but I guess this logically only works when chosing variables for a variable product. And that's why I was coming to the point of a dynamic price update. When I select 1, I want to see the price for 1, for 2, the price for 2 etc. I really do understand you keeping the template as lean and mean as possible with native solutions. I guess my proposal for the dynamic price is more a personal approach thing as I can imagine most people will be fine with the static solo price displaying Thanks and you're welcome!

  • @syndicationexpress9079
    @syndicationexpress9079 Před 3 měsíci

    It worked perfectly. Thanks for this information.

  • @AbdoZaInsert
    @AbdoZaInsert Před 3 měsíci

    What a legend, people like you make WordPress a better environment 😍❤❤❤

  • @richarddodd7234
    @richarddodd7234 Před 3 měsíci

    What a great element. This must have taken a good while to get your head round and build, but it really shows how powerful the Cornerstone builder is and how it can speed up builds. Great job

    • @buildingonwordpress
      @buildingonwordpress Před 3 měsíci

      Thanks @richarddodd7234! Was definitely a fun one to put together. Cornerstone is a powerhouse of a tool.

  • @schulleroscar2037
    @schulleroscar2037 Před 3 měsíci

    Hello, is it possible that when the data is changed on the google sheet, the change is deployed on wordpress without refresh the page?

  • @rizikilearnacademy4595
    @rizikilearnacademy4595 Před 3 měsíci

    Very cool and helpful. Thank you.

  • @BartLenski
    @BartLenski Před 3 měsíci

    We need more WooCommerce pre-build stuff please. Great work

  • @BartLenski
    @BartLenski Před 3 měsíci

    Why this is not in PRO already ;) Get it there pronto please

  • @adamrickman2461
    @adamrickman2461 Před 4 měsíci

    Oh, this would work so well for forms. I'm usually stylizing that through CSS as well, so this might be a really good solution for that as well.

  • @scottmcmillan47
    @scottmcmillan47 Před 4 měsíci

    That's a great element. I would pay for this as well!

  • @bill-hodgson
    @bill-hodgson Před 4 měsíci

    I would pay for this. This is exactly what ThemeCo should be doing with you. Name a price!

  • @riceman2112
    @riceman2112 Před 4 měsíci

    Wow, amazing timing. I am working on a store as we speak. I have traditionally used custom css, but this element will be so awesome to have. Just bought it. My ONLY suggestion, and Ill modify v1.0 via parameters and create a new modified template, is to have an option for Border Radius on all elements. Thanks again. Cornerstone is the best and your tutorials are always something i watch immediately on release!

    • @buildingonwordpress
      @buildingonwordpress Před 4 měsíci

      Thanks @riceman2112! Apprecaite the feedback. I actually had planned for individual radius controls and kept going back and forth on things getting overly complicated. Really not a bad idea though. Perhaps I'll add it back in for v1.0.1 :) Appreciate your support!

    • @riceman2112
      @riceman2112 Před 4 měsíci

      ​@@buildingonwordpress I am just digging in and I see it is a bit complicated. I am just learning to use parameters, and didn't really understand them until I watched your tutorials. I just found the Radius under "Globals" at the top. Good to go! Thanks again. FYI, My business is UX Media House, so thats the account name under your new Pixels site. I always build with Cornerstone if I have the choice. Love it, and have been using it for the past 5 years.